I've got a strange issue with IE7 and IE8 where drop-down menu items jump around when hovered over - some negative margin rules are being applied on hover on the top level menu items which are cascading down to sub-menu items. Basically the drop-down menu is overriding some of the styles from Twitter bootstrap, which is included before the app.css applies custom styles.
This code is the culprit and I can't seem to override it without losing the styling on the top level items that I need:
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover,
.navbar .nav > li.active > a,
.navbar .nav li.dropdown.open > .dropdown-toggle {
height: 12px;
margin-top: -10px;
padding-top: 10px;
}
Here is a [demo link][1] (only the dropout menu styling is the issue at the moment, I realise the top level items aren't very legible!)
Just change the rule to this (basically add the descendent selector under .nav):
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover,
.navbar .nav > li.active > a,
.navbar .nav > li.dropdown.open > .dropdown-toggle {
height: 12px;
margin-top: -10px;
padding-top: 10px;
}
i.e.
.navbar .nav li.dropdown.open > .dropdown-toggle {
becomes:
.navbar .nav > li.dropdown.open > .dropdown-toggle {
Related
Currently working on a website for a client, who wants a custom navigation bar, which aligns with a background image.
A working solution is as below:
The issue I have is that when the browser is resized/certain desktop monitors, the navigation bar does not align with the background. The reason for this is I have coded in pixel values and not made it properly responsive yet, which is where i'm currently stuck. Could anyone guide me on how to make the angles change depending on the browser size/viewport in order to achieve the alignment i require across all desktop/tablet devices?
Can provide the code as required, the navigation bar is just a vertical menu with margin-lefts though.
.nav {margin:0; position: fixed; z-index: 9999999; left:734px; top: 79px; width: 200px;}
.nav ul {}
.nav ul li {list-style: none; border-bottom:1px solid #7c818c; padding-bottom: 10px; padding-top:11px; width:170px; font-size: 14px;}
.nav ul li:nth-child(2) {margin-left:27px;}
.nav ul li:nth-child(3) {margin-left:55px;}
.nav ul li:nth-child(4) {margin-left:87px;}
.nav ul li:nth-child(5) {margin-left:118px;}
.nav ul li:nth-child(6) {margin-left:146px;}
.nav ul li:nth-child(7) {margin-left:180px;}
.nav ul li:nth-child(8) {margin-left:205px;}
.nav ul li:nth-child(9) {margin-left:235px;}
.nav ul li a {color: #7c818c; text-decoration: none;/* text-transform: uppercase;*/}
.nav ul li a:hover, nav ul li a.active {color: #fff;}
Style all anchors/links:
.navbar li a {
color: blue !important;
}
Style anchors/links under ul:
.navbar ul li a {
color: blue !important;
}
I would like to achieve 2 different scenarios:
Style all links, except those under ul
Style all links, except those under class .dropdown-menu (ul)
JsFiddle
Do you mean all nested links should not be colored blue? if so change the css as below.
.navbar li a {
color: blue !important;
}
/* Link under ul only */
.navbar ul.dropdown-menu li a {
color:initial !important;
}
Use this selector to style only the first ul. and the under color is different
.navbar-nav > li > a {
color: blue !important;
}
see this fiddle: https://jsfiddle.net/v2xmc150/2/
When a child menu item is active its parent menu should look the same. However, I don't know why, the parent item reacts only to background-color: #83bf17 but not to color: #6B4A38;.
Live example: http://solutionsmvo.nazwa.pl/projekt/kama/lecznica/
CSS:
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.current-menu-parent {
color: #6B4A38;
background-color: #83bf17;
}
Edit
Sorry, forgot to mention that !important doesn't work.
You need to target this:
.navbar-default .navbar-nav > li.current-menu-parent > a{
color:#6b4a38;
}
This should work.
Use !important for color like this:
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.current-menu-parent {
color: #6B4A38 !important;
background-color: #83bf17;
}
Edit: Try to comment color from the following class
.navbar-default .navbar-nav > li > a {
/* color: #83bf17;*/
display: block;
font-size: 1.25em;
font-weight: 700;
padding: 15px 30px;
text-transform: uppercase;
}
you have a more specific selector which is overriding
.navbar-default .navbar-nav > li > a {
color: #83bf17;
....;
}
so you should delete that in order for the element to inherit the parent's value for the color property
try .current-menu-parent a { you have to target a if it's to receive color. And to target only direct descendant a use .current-menu-parent > a { if there's no elements in between (I checked there is no elements in between).
There's another problem beside not targeting a, you have too specific selector that overrides color even if a is included in selector.
try adding:
a.dropdown-toggle {
color: #6B4A38 !important;
}
I'm hoping someone can take a minute and look at my responsive web page and let me know what CSS rule I need to write to keep the boxes in the collapsed state of the menu from turning completely white on hover. I can't see my white txt links underneath. I tried this rule and it didn't work:
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a:hover {
text-decoration:none;
}
If you resize your browser until the top nav collapses, you will see what I mean when you open the collapsed menu and hover.
Page I'm creating is here:
Using tw bootstrap - Any help would be greatly appreciated.
Thanks
You need to override the style for the appropriate media query. To only target the menu when it's collapsed, you can do:
#media (max-width: 979px) {
.nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus {
background-color: transparent;
{
}
Or if you want to apply it universally to all resolutions:
.nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus {
background-color: transparent;
{
Add the line:
background-color: transparent;
To the rule:
.navbar .nav > li > a:hover { ... }
.. which is on line 43 of your "main .css" (why is there a space after main and before the file ext?)
I'm not sure if I formulated the question correctly, but let me try to explain what I want to achieve.
I'm trying to style navigation menu of a WordPress-based site.
I want the submenu links to be evenly arranged along the entire width of the website's <body> tag (960px wide). If the links of a particular submenu do not fit in one row, I want them to wrap around and arrange themselves in neat columns.
Finally, I want the submenu, when it drops down on hover, to push the rest of the website's content down.
Problem: the submenu unordered list affects the position of the links in the parent unordered list, moving the links around. Somehow, the only thing I could do to keep the parent menu links in place was to pull the submenus out of the way by applying margin-right:-965px;
Question: How should I modify my CSS to position both submenus all the way to the left, level with the edge of the main container?
(If necessary, I can assign custom classes to each submenu separately, for example: .submenu-about and .submenu-investors.)
Thank you in advance for your help!
Here's the complete CSS for the navigation menu:
.main-navigation ul {
list-style-type:none;
margin-top:45px;
}
.main-navigation ul {
display: inline-block;
width:70%;
float:right;
}
.main-navigation ul li {
float:left;
}
.main-navigation ul li a {
display:block;
margin:3px 0 3px 40px;
}
.main-navigation ul ul {
background:#efefef;
display:none;
}
.main-navigation li {
font-size: 13px;
}
.main-navigation li a {
outline: none;
text-decoration:none;
border-bottom: 0;
color: #6a6a6a;
text-transform: uppercase;
//white-space: nowrap;
}
.main-navigation li a:hover {
color: #000;
}
.main-navigation ul li:hover > ul {
margin:-1px -960px 3px 0;
display:block;
width:960px;
}
.main-navigation li ul li a {
font-size: 11px;
margin: 10px 0 10px 10px;
width:180px;
}
.main-navigation .menu-item > a,
.main-navigation .menu-ancestor > a,
.main-navigation .page_item > a,
.main-navigation .page_ancestor > a {
color: #9a9a9a;
font-weight:bold;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #636363;
font-weight:bold;
}
This Should do it
Add this to your css
.main-navigation ul li .sub-menu {position:absolute; left:0px;}
Found my own answer.
Remove the background from ul li:hover ul.
Set position:relative and the gray background for the ul li:hover >ul li.
Set individually the negative left margins for each submenu li item, to pull them left separately by different number of pixels.