Jump to content
Sign in to follow this  
yesterdayshero

Navigation color CSS for Categories set as menu items

Recommended Posts

yesterdayshero

I'm having trouble changing my main navigation colours for current page status on menu items that are links to categories. As you can see on this page, I'm after a red background and white text for the current page: http://clockworkmovies.com/our-picks/ The other navigation items are actually links to categories. I've also tried a nav item with a custom URL to category pages, but still no luck. For example: http://clockworkmovies.com/category/action/ The code I've used is:

#primary-nav li.current_page_item a {color:#fff !important;}
#primary-nav li a{
	  color: #666666 !important;
	}
#primary-nav .main-nav li a:hover{
	  background: #ed1c24 !important;
	  color: #fff !important;
	}
#primary-nav .main-nav li a:active{
	  background: #ed1c24 !important;
	  color: #fff !important;
	}
.main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a {
	  background:#ed1c24 !important;
	  font-color: #fff !important;
	}
.sf-menu li, #primary-nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	background-color: #fff !important;
	}

Any help would be appreciated.

Share this post


Link to post
Share on other sites
yesterdayshero

Thanks for the response Catrina, unfortunately it doesn't seem to work on the menu items that go to Category pages. I've already been using Firebug to try work it out but no success so far :( Anyone else have this issue when adding categories to their menus? Is there a CSS control for this? Maybe even a way to list categories in a page?

Share this post


Link to post
Share on other sites
catrina

I haven't seen any posts about issues with CSS control for category pages. Perhaps you can also try this one:

ul#menu-top-nav div.main-nav li.current-menu-item

Paste it into the base.css file for the child theme


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
junglam

Hi, I have the same problem here. It doesn't work with category-menu, also the same problem with default settings. Here is my customized css:

#nav_row li *{
	   background-color: #1874CD
	}
	
	#nav_row ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	  background-color: #104E8B
	}
	
	#nav_row ul li a:hover {
	  color:#104E8B;
	  background:#FF1493
	}

Share this post


Link to post
Share on other sites
kastelic
#primary-nav li.current-menu-item a { background: orange !important}

Make sure you are targeting the anchor tag and you include !important.

Share this post


Link to post
Share on other sites
yesterdayshero

Thanks so much Jimmy. Worked like a charm!

Share this post


Link to post
Share on other sites
junglam

Thank you Jimmy! It works perfectly.

Share this post


Link to post
Share on other sites
samisam

So what am i missing? I've tried EVERY example on this forum trying to change the fonts for the main navigation in every way possible. could someone please help?

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  

×