Jump to content
Sign in to follow this  
apadilla

How to highlight current page menu item ?

Recommended Posts

apadilla

HI: I would like to have the current page's menu item on nav change to color #4086AF. It currently works when a child or grandchild page is selected, but I cannot get the parent nav to change color when on the parent page. (Also, same problem when main nav has no child nav). An example of this problem: http://churneyperio.com/ Any help would be appreciated. Thanks! My current custom css code is:

 #primary-nav ul.main-nav.nosearch {
	font-size: 14px!important;
	font-weight:bold!important;
	background: #005787!important;
	}
	
	/*this controls CURRENT page*/
	#primary-nav .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: #4086AF!important;}
	
	/*top nav background color, not on mousover*/
	#primary-nav .main-nav.nosearch a{background:#005787!important;color:white!important;}
	
	/*subnav background color, not on mousover*/
	#primary-nav .main-nav.nosearch ul a{background:#00a9d4!important;}
	
	/*this controls the nav hover state*/
	#primary-nav .main-nav.nosearch a:hover  {background:white!important;color:#005787!important;}
	
	/*this controls subnav hover state*/
	#primary-nav .main-nav.nosearch ul li a:hover  {background:white!important;color:#005787!important;}[code]

Share this post


Link to post
Share on other sites
kastelic

/*top nav background color, not on mousover*/ #primary-nav .main-nav.nosearch a{background:#005787!important;color:white!important;} Put this at the top of your CSS code, so that the one above it will override it.

Share this post


Link to post
Share on other sites
apadilla

Thank you. I tried that and it had no effect. Any other possible solutions?

Share this post


Link to post
Share on other sites
kastelic

Remove !important from this line: /*top nav background color, not on mousover*/ #primary-nav .main-nav.nosearch a{background:#005787;color:white!important;}

Share this post


Link to post
Share on other sites
apadilla

Perfect- that worked! Thanks, you have truly earned good karma for this!

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  

×