When hovering on my second menus (can be found there: http://justxp.plutohost.net/survive/index.html)
the items are jumping.
It happened once I added a background with padding to them, well that's what it needs to have, but it should just appear, not jump?
My code:
HTML + CSS can be found here:
http://pastebin.com/cbLDRefB
thanks.
For not jumping you should not change the size of the elements on hover
you have
.nav6 a:hover {
padding: 21px;
}
so you need to add padding to the all links not only :hover
.nav6 a {
padding: 21px;
}
Related
I am trying to style my WP Menu Navbar. I want that the Pages that have children pages can be styled differently (mainly reducing the bottom margin, so that it is clear that the children pages belong to the parent page).
I know how to inspect a site and tried to target possibly every class that is listed there. But nothing is working. The site isn't live yet, but I will attach a screenshot of Google Inspect. It's the "menu-item-425" that I want to style differently.
I tried targeting like this:
.main-menu-links .menu-item .menu-item-has-children ul li a {
color: black;
font-size: 50px;
}
But nothing changes. Any advice?
Try to remove space between .menu-item and .menu-item-has-children like this
.main-menu-links .menu-item.menu-item-has-children ul li a {
color: black;
font-size: 50px;
}
I guess these are classes of the same element.
I am using bootstrap's dropdown from a navigation div, and I'd like to change the color of the the sub-menu links on hover. Nothing I'm attempting works, and I can't make sense of it. It's not having any effect even when trying to run things from the chrome console.
I have created a css file where I override the defaults. The background change for normal a tags work, but the hover doesn't. Why is that? I also tried affecting the li and using !important, but none of that is having any effect.
I'm using Bootstrap 3.1.1. Here's my css:
.dropdown-menu > li > a {
color: white; /* This has an effect */
}
.dropdown-menu > li > a:hover {
background-color: red; /* This doesn't... why? */
}
And check out this jsfiddle too for a demonstration (for some reason you need to drag the result panel a whole lot to the left before you see the button). Any ideas?
edit
Note I am trying to change the background color for the links in the dropdown, not for the main button which is MyProfile.
Bootstrap defines a background image for the elements to override some clashes in their media queries. Remove the image to use a simple fill color.
You can redefine your hover as follows:
.dropdown-menu > li > a:hover {
background-image: none;
background-color: red;
}
http://jsfiddle.net/sW7Dh/4/
I have a small space in my main navigation menu at:
http://ranchocordovaeventscenter.com/
I can't seem to find any css that is causing it to do this.
Can anyone help?
Thanks in advance,
Matt
Since your setting the list elements to inline-block. It's creating spaces between each element as if it's text ( words should have spaces between them, it makes sense if you think about it ).
.nav-menu {
font-size: 0;
}
Just make sure you reset the font-size on the children or else they will inherit this size and be illegible.
I don't see the space you are talking about, but something similar happened to me earlier.
CSS Box Model Puzzle - I must be missing something
The key is is the following piece of css code:
box-sizing: border-box; /* needs prefixes for webkit/moz */
Try including this css property for the container divs you may have.
Hope this helps!
The problem is that each anchor tag <a> inside the <li> element have borders in both sides...
To solve this, add border-right-width here:
.main-navigation li a {
border-right-width: 1px solid #F9B233;
}
and remove the following property in the above selector:
border-width: 1px solid #F9B233;
To remove the right border of the last element you can do this:
.main-navigation li:last-child a
{
border-right-width: 0;
}
My custom drop down menu has a really large change in top and bottom padding.
UPDATE Javascript, CSS & HTML included in fiddle [PHP removed]
First off, I didn't realise I could share a fiddle ^^
Pretty epic site.
I'ma keep debugging, but thought I'd post it here to see if anyone can spot where the problem is :)
In your fieldset css you are changing the line-height, which is also applied to the dropdown.
You have to set the line-height in the css for the dropdown:
.dropdown,
.dropdown li /* or whatever other selector is also needed */
{
line-height: 1em;
}
EDIT:
That seems to fit quite good:
.dropdown,
.dropdown li,
.dropdown span,
.dropdown a {
padding: 0;
line-height: 3em;
}
Example page,
Accompanying CSS
Should be a fairly basic issue but for some reason I can't figure it out.
Basically I want the links in my navbar to have no underline or colour change and remain white.
Any idea where I'm going wrong?
It's because you're selecting the main .links element, but not the actual a elements inside. This should do the trick:
.links a {
text-decoration: none;
color: white;
}