Title: Styling Menu Classes
Last modified: August 22, 2016

---

# Styling Menu Classes

 *  [SpencerCE89](https://wordpress.org/support/users/spencerce89/)
 * (@spencerce89)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/styling-menu-classes/)
 * Here is my basic html/css that I wrote up.
 * [http://jsfiddle.net/behr9q26/1/](http://jsfiddle.net/behr9q26/1/)
 * As you can see, hovering over a menu item changes the background color to blue,
   and the link color to white.
 * And for the nested menu items, whatever its parent is remains highlighted as 
   well.
 * If, say, I’m on the page that corresponds to the deepest nested item, I’d like
   all those previous parents to remain highlighted as well. Just like in the plain
   html/css.
 * I think I have achieved this.
 * But I’m having trouble getting the text colors to remain the correct colors when
   they are in these various states. Sometimes they will be highlighted but have
   the dark text, other times the non-highlighted items will have the light text.
 * Here’s my most recent bit of css for that:
 *     ```
       #nav .current-menu-item {
           background-color:#4C9ED9;
       } /* the current Page */
   
       #nav .current-menu-item a {
           color: #fff;
       }
   
       #nav .current-menu-parent {
           background-color:#4C9ED9;
       } /* the current Page */
   
       #nav .current-menu-parent a {
           color: #fff;
       } 
   
       #nav ul li.current-menu-ancestor {
           background-color: #4C9ED9;
       }
   
       #nav ul li.current-menu-ancestor a {
           color: #fff;
       }
       ```
   
 * This is basically my cleaned up, “least broken” attempt. Currently, when I’m 
   on a nested page and I look at the menu I’m in, the items that aren’t highlighted
   have the light text, when they should have the dark text.
 * And every time I try to figure out the specificity to make those un-highlighted
   items dark again I just make it worse and worse.
 * I hope I’ve been clear, I think if you look at my original code up there you 
   will kind of get an idea of what I’m talking about, and what my intent is.
 * If someone could tell me what I need to add to those classes to get this to work,
   I’d appreciate it.

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [11 years, 3 months ago](https://wordpress.org/support/topic/styling-menu-classes/#post-5801709)
 * If you’re having a CSS specificity issue then we need to see the Webpage in context,
   but if you can’t show that then I encourage you to get more familiar with Firebug.
   Firebug can expose the CSS classes you need to override. [http://getfirebug.com/css](http://getfirebug.com/css)
 *  Thread Starter [SpencerCE89](https://wordpress.org/support/users/spencerce89/)
 * (@spencerce89)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/styling-menu-classes/#post-5801767)
 * Found a site that will let me host a sandbox of it.
 * As you can see, when you are on the “Home” page, and hover over “Test” it looks
   like it works fine. But if you click on test, and then hover over it, all the
   text within is white. And it’s the same when you go deeper into the nested menu,
   as well.
 * I actually use the “inspect element” thing in firefox quite a bit, but this, 
   for me, is pretty complex, especially when you throw in four (I think) classes
   with it, so it hasn’t been of much help, since overriding one thing just seems
   to break another.
 * If you get a chance to look at it I’d appreciate it.
 * Edit: Apologies, messed up the sandbox. Will post back when I’ve fixed it.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Styling Menu Classes’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 2 replies
 * 2 participants
 * Last reply from: [SpencerCE89](https://wordpress.org/support/users/spencerce89/)
 * Last activity: [11 years, 3 months ago](https://wordpress.org/support/topic/styling-menu-classes/#post-5801767)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics