Gray Nav Bar Box

[vburnham 0]

I have seen that others have had similar problems but I can't seem to find the solution. In firebug this is what I have found is causing the problem:

.main-nav .current-menu-ancestor a, .main-nav li.current-menu-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .main-nav li.current_page_parent a, .sf-menu li li, .sf-menu li li li {
	    background: none repeat scroll 0 0 #F2F2F2;
	}
	.main-nav li a:hover, .main-nav .current-menu-ancestor .current_page_item a, .main-nav li.current-menu-ancestor ul a:hover {
	    background: none repeat scroll 0 0 #F7F7F7;
	}
	ul.sf-menu ul li {
	    border-bottom: 1px solid #FFFFFF;
	}

When I test it in firebug I change it to:

.main-nav .current-menu-ancestor a, .main-nav li.current-menu-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .main-nav li.current_page_parent a, .sf-menu li li, .sf-menu li li li {
	    background: none repeat scroll 0 0 #000;
	}
	.main-nav li a:hover, .main-nav .current-menu-ancestor .current_page_item a, .main-nav li.current-menu-ancestor ul a:hover {
	    background: none repeat scroll 0 0 #000;
	}
	ul.sf-menu ul li {
	    border-bottom: none;
	}

However when I placed this in the custom code area it doesn't override it and it keeps the gray there. Does anyone have a solution that they found? THanks!

[catrina 103]

Can you please post a link to your site?

[vburnham 0]

[url]http://proof.saamadesign.com/[/url]

[catrina 103]

I see no grey background color in the navigation but I do see grey text. Is it the grey text you're trying to change?

[vburnham 0]

When you click on one of the drop down menu items, the current nav page and all their subpages all of the sudden display a gray background.

[catrina 103]

Strange, I don't see that happening. Try this code: [code]ul.main-nav li.current_page_item {background-color: none;}[/code]

[vburnham 0]

No go. I can't find that color any where in the css until I use firebug.

[catrina 103]

Hm, strange. Which browser are you using? I can't see it in Firefox for Mac.

[vburnham 0]

Maybe its for PC. I test it in both firefox and ie. My client can see it which is the biggest problem. :(

[Jenny 33]

Use this: [code]/* TO MAKE THE ACTIVE MENU APPEAR LIKE THE REST */ .main-nav .current-menu-item a, .main-nav .current-menu-item ul li a:hover { background-color: #ffffff !important; color: #ff9c00 !important; } /*match to text/bg on hover*/ .main-nav .current-menu-item ul li a { background-color: transparent !important; color: #3f95c7 !important; } /*match to text/bg NOT on hover*/[/code]

[vburnham 0]

This just makes it so all of them do it now. But even when I change the colors they stay gray. Aarrgg!

[catrina 103]

Can you please post a screenshot of the nav bar with the grey boxes showing?

[vburnham 0]

It only does this when I click into one of the drop down menu items. [url="http://proof.saamadesign.com/wp-content/uploads/2012/01/gray_box.jpg"]http://proof.saamadesign.com/wp-content/uploads/2012/01/gray_box.jpg[/url]

[catrina 103]

Does it also show up when you hover over the drop down menu items?

[vburnham 0]

Only if a drop down item is the current page. If the current page is a parent menu item they appear normally.

[kastelic 6]

Try applying your background color to [code].sfHover a[/code] as well. That is the class that gets added to the top nav item when it or its submenu is being hovered over. Sometimes its hard to spot since its not there unless you're hovering over it.