Jump to content
Sign in to follow this  
pbakker22

Nav menu font color/hover color?

Recommended Posts

pbakker22

Hi, Love PagelinesPro so far, especially as I'm a newbie at CSS coding. However, I'm having trouble customizing the main Nav Menu, which I'm using as a drop-down menu. I have a white page, and have set the hover color to white using Design Control, so that the hover block becomes invisible. Anyway, what I want to do is: -have the inactive menus font a shade of gray (say #DDDDDD) -have the active menu font in black -have the hover font color change to black when I move the mouse cursor over a menu item I searched the Forum, and found the following custom CCS code: ` #primary-nav li.page_item a {font-size: 11px;} .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 { color:#000000; background:none repeat scroll 0 0 #FFFFFF; } ` The above does show the active menu item in black color font. However, it does not change a gray font to black when I hover on it. It also doesn't change a main menu heading to a black color font after I've clicked on a sub-heading (so the sub-heading turns to black while the main heading stays grays; weird huh?). Anyway, I'd really appreciate any help, or pointers as to where I should be looking in Firebug..!

Share this post


Link to post
Share on other sites
timlinson
The above does show the active menu item in black color font. However, it does not change a gray font to black when I hover on it.
Try adding this hover rule: `#primary-nav li.page_item a:hover {color:black;}`
It also doesn't change a main menu heading to a black color font after I've clicked on a sub-heading (so the sub-heading turns to black while the main heading stays grays; weird huh?).
One problem is that the ancestor selector needs underscores instead of hyphens: `current-page-ancestor` => `current_page_ancestor`

Share this post


Link to post
Share on other sites
pbakker22

Hi Tim, Thanks for solving part of my problem (your 'ancestor underscore' fix)! :) Your first fix though didn't seem to work: hovering color change does not work. I've included two screenshots showing the following: screenshot1: when I click on a main menu heading every sub-heading becomes black (so if hovering worked I wouldnt' be able to tell) 8taCE.jpg screenshot2: when I try to hover it doesn't change color bKFXQ.jpg I've played around for hours trying to fix it but I am getting nowhere. Boo.

Share this post


Link to post
Share on other sites
cmunns

This would be more easily solved if you can give us a live link so we know exactly what your CSS is doing.

Share this post


Link to post
Share on other sites
pbakker22

Hi Adam, Here's a link: www.medmininggroup.com

Share this post


Link to post
Share on other sites
timlinson

Looks like you're using brandnav, so change the two #primary-nav rules to #brandnav (no hyphen in this one).

Share this post


Link to post
Share on other sites
pbakker22

Awesome Tim! That solved the hover issue! :) I was indeed using brandnav. ;) I only changed the hover rule because when I changed the other main-nav rule it didn't work properly (menu headings didn't go black when selected). I still don't understand why, if I click on a main menu heading, all the subheadings become black too. :( Does it have to do with an 'ancestor' rule? Current code is this: ` .main-nav li.current_page_item a, .main-nav li.current-page-ancestor a { color:#000000; background:#FFFFFF; } #brandnav li.page_item a:hover {color:black;} `

Share this post


Link to post
Share on other sites
pbakker22

It's as if main headings and subheadings are treated as a single menu item rather than independent.

Share this post


Link to post
Share on other sites
cmunns

` .main_nav .main-nav li a:hover, #grandchildnav .current_page_item a, #grandchildnav li a:hover, #grandchildnav .current_page_item ul li a:hover {color:#000;} `

Share this post


Link to post
Share on other sites
pbakker22

Hi Adam, Thanks, I inserted your code but now the current page is not highlighted in black (menu selection stays blank)..

Share this post


Link to post
Share on other sites
timlinson

Set the active parent/child color: `.current_page_ancestor a, .children .current_page_item a {color:### !important;}` Set the hover color: `#menu-nav a:hover {color:### !important;}` Set the child color: `.children a {color:### !important;}` It's getting a little difficult to pinpoint exactly what you want without possibly reverting any other behavior. You might get more mileage at this point by installing firebug and trying to pinpoint the selectors you want.

Share this post


Link to post
Share on other sites
pbakker22

Thanks Tim.. I've inserted your code and modified it a bit. I'm almost there. With the code below: the hover works, clicking on a child menu hilights it and the parent, but when clicking on a parent the parent stays blank, i.e. is not hilighted. If I were to include a 'current_page_item' css line then the parent does hilight but then the children submenus also hilight. aargh! It's frustrating. Anyway, I have been using Chrome Dev. Tools the last three days but I can't seem to find the relevant code in it. So the current code is below, and what's missing is a line that should only deal with the parent being hilighted when clicked without affecting the child submenus. Any further ideas? Your help is much appreciated. :) ` #menu-nav a:hover {color:#000000 !important;} .current_page_ancestor a, .children .current_page_item a {color:#000000 !important;} .current_page_item ul {color:#000000 !important;} .children a {color:#757575 !important; `

Share this post


Link to post
Share on other sites
pbakker22

I fixed it! yaay I'm awesome :D In addition to the previous code, I added the following line: `#menu-nav li.current_page_item a:visited {color:black;}` This ensured that when clicked, the parent menu item became black while the child menus stayed gray. Okay thanks Tim and Adam!

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  

×