Apologies if this has been asked or is a dumb question - it seems simple, but I did search.
On my site, I use a navbar that I initially pulled from a site with many free canned navbars long ago, and have since changed it a lot since then by just tinkering with parameters. Now, with the advent of mobile (yes, I'm behind), I want to change all my dropdown menus from popping out on hover to popping out on click. I know this is how bootstrap does it, etc, so clearly it can be done.
For me, things start changing colors and appearing based on something like this:
.menu ul li.selected a.outer1 {color:#000; background:#929292; margin-bottom:250px;
zoom: 1; filter: alpha(opacity=60); opacity: 0.6; }
When the outer list element is selected, stuff changes. However, it seems that the ".selected" makes the li "selected" on hover. Is there a way to change it so it's selected on click? Just a simple word change? Or am I going to have to change my structure? I can provide additional code if desired.
It is not a simple single CSS change. The media queries loads a certain div for a specific viewport and hides another.
You should look at media queries and how you want to load/hide specific elements per viewport.
Related
I am redoing a Wordpress website, and I am having a problem with the menu. I am using the Compass theme and this is what the top menu looks like.
Then when I do
#MainNav {
width: 100%;
white-space:nowrap;
}
in Custom CSS in Wordpress, the menu goes beyond the page.
Any suggestions? I want the menu to appear in one line and to dynamically resize. I have done extensive Googling and have tried anything I could find, including flexboxes, but nothing has solved it. I am also very new to Wordpress and don't really understand the file structure, and I'm also pretty new to asking on Stackoverflow!
I find the easiest way to get my menu to fit in a theme I didn't design is to write CSS overrides that adjust the padding and font size of the list items in the menu. Usually I do this in a media query so that only certain breakpoints are affected by my change. Here's an example of how you could get the menu items to fit nicely. Make the margin-right on the li 0. You can also adjust the font size on the li > a if you need more wiggle room.
Adjust the margin-right so it is 0
If you were not using a media query, your custom CSS would look like this:
#menu .ddsmoothmenu li {
margin-right: 0;
}
Your idea of flexbox seems to work okay as well. Although the menu may look a little funky on tablet size screens.
Flexbox
One final note, I always use a child theme when customizing a theme I didn't design. This way you can, in an organized way, customize the theme and not lose any of your code when the parent gets updated. You can read about child themes here:
https://codex.wordpress.org/Child_Themes
In real need of help here after about 3 to 4 hour of independent searching. I am building a website where it imperative I change the height of a button so iphone/ipad users get the correct style. After searching, people seem to be pointing me to the -webkit-appearance values and I've tried to impliment them with absolutly no luck. I have a codepen (https://codepen.io/osa10928/pen/awrmRG) where this was a problem too so you guys can look at that code and try and solve the problem there and hopefully I can carry yall's implimentation to my other project (I'm not at liberty to share my other projects code)
Looking at the codepen you'll see the buttons #start-button and #strict-button do not change height on iphones (or ipads I presume, I dont't have one to check). I've tried several things like including -webkit-apperance: none on a button tag, on the individual id's in css. I've inlcuded:
input[type=submit], input[type=reset], input[type=button]{
-webkit-appearance:none;
}
all to no avail. Please, could someone show me the proper implimentation of -webkit-appearance: none, or something else that will allow me to change button heights for iphone users?
Update Turning buttons into divs and restyling as buttons has been the best option. If anybody does have a working work around I'd love to hear it. Thanks all!
you can use padding top and bottom instead of height
I'm trying to modify Bootstrap's default buttons so that they look like they are de-pressing.
The effect can be seen here: http://www.esecamalich.com/blog/before-&-after/
I've been working on it with the Less framework, and so far I can make everything happen EXCEPT make the button move down 3 pixels on active. This essentially kills the illusion and is incredibly frustrating.
For instance, this is what my Active State CSS/LESS looks like:
.btn.active,
.btn:active {
top: 3px;
#gradient > .blockyShadowActive();
}
Now if I change top to margin-top, then it works, but has the unfortunate side-effect of moving down everything below it, which is silly. I've tried everything I can to sanitize the effect and see what is preventing it, but I can't figure it out. Some things I've tried:
Pulling the button out of all containers so that only body level properties apply
Removing/Commenting out all styling from the buttons except for the top property
Tried sanitizing the buttons and containers on a clean version of Bootstrap with pure CSS (no Less), removing every property and still can't get it to move down 3 pixels (or any pixels for that matter)
For the life of me I can't figure out what is preventing this from happening. Anyone seen this kind of thing before?
What CSS property should I change at this page to disable transparency of a share iframe which appears when Like button is clicked?
When you hover on that Facebook box after clicking Like button, it becomes partially transparent and if you move your cursor away from it, it becomes solid white. I want it to be completely opaque all the time.
Well, I see no transparency on that box, only for the fade-in effect when it opens, but once it's fully opened it's not transparent.
To answer your question, you can see for yourself using firebug (firefox) or the development tools (chrome/safari) which css rules apply to what element.
From what I've seen now, you can use the use these: fb_edge_comment_widget fb_iframe_widget which are the classes of the span containing the iframe, or you can use the iframe itself.
The thing is though, is that you should not hack that. Why? Since then you'll have to always check for updates facebook are making, changes that they do not update you about (API changes they update on the blog), if you fail to be aware of these changes it can "break" your code/style.
I was also having the exact same problem.
I am using an AddThis widget set, and I don't know if this was the case for you or not (it looks like you may have chosen a different solution as I can't see the Like button on your site).
I ended up using
.addthis_button_facebook_like {
opacity:1 !important;
}
but you would use whatever selector that wrapped your like button. if using the standard embed from Facebook, it would probably be
.fb-like {
opacity:1 !important;
}
Someone else was having a similar problem with a Send button, which got me on the right track.
See it working like it ought to here. I'm sure it had something to do with some conflict from other styles, or possibly AddThis, but it's working now!
I have some pure CSS navigation I'm working on and I'm trying to get what is currently the "active" state to the hover state. I didn't write the original code entirely myself, and it's been somewhat of a time-consuming process reverse-engineering it (the original code was public domain).
I would like it such that the current "active" state (i.e. menu2) is also the hover state, instead of merely changing the background color to be a bit darker.
You can view a demo here.
You can download the source here or view the source from demo above.
p.s. I considered posting this on webmasters/programmers/code review but it didn't seem quite as appropriate as here, since this isn't asking for a review of my code per se, is a specific rather than a general web question, and is not about programming principles... If I am incorrect, feel free to migrate. :)
This is what you're after correct?
Demo
Source
Mimic the active state to be triggered by the hover state
the key was this css:
#hNav>ul>li:hover {height:52px;margin:0;padding:0}
#hNav>ul>li:hover>span.o1{background:transparent url('http://i.imgur.com/ax6LZ.png') left top no-repeat;display:block;height:52px}
#hNav>ul>li:hover>span a{background:transparent url('http://i.imgur.com/zapF1.png') right top no-repeat;color:#000;padding:22px 0 0}
of course those are the demo urls... replace as needed.
I'm not sure if this is what you're after but if you're trying to display a particular style for Hover over an Active element, you can achieve it by chaining the CSS pseudo elements together, ie:
As well as a:hover { background:#EEE } you can have a:active:hover { background:#EEE } which will only apply to Active Elements on a Hover Event.