• 0
Sign in to follow this  
Followers 0

Gray Nav Bar Box

Question

Posted · Report post

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!

Share this post


Link to post
Share on other sites

15 answers to this question

  • 0

Posted · Report post

Can you please post a link to your site?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0