Ever tried to change the color of your nav menu items? Interested in changing the background color of each item? How about the hover color or color of each items text. You may want to use a different color for text on each menu item and another for when someone hovers over each item.
In this tutorial, you’ll learn how to:
- Add a unique CSS class for each menu item
- Use that new CSS class to target each menu item
- Change the background color of each item
- Customize the hover color of each item
- Add a box shadow to hovered menu items
- Style the text color of each item when hovered
The WordPress navigation menus take up a large chunk of CSS in your themes style.css file making it one of the most challenging elements to customize.
With that in mind, i’m simply going to provide the exact code i used on this site and then explain a bit about each part.
Add CSS Classes
The first step is to go to Appearance > Menus and click the Screen Options tab located in the top right hand corner of the Edit Menu screen.
Check the CSS Classes box under Show advanced menu properties.
Next step is to add a unique name to the CSS classes field for each menu item.
Once you’ve added the new classes for each item, you can then use those classes to style each one in your child themes.style.css file.
Style Sheet CSS Code
Here’s the code i used to style different classes of the primary nav menu.
/**
* @author Brad Dalton - WP Sites
* @example http://wp.me/p1lTu0-a1O
*/
.home-nav {
background: #0F222E;
}
.menu-primary li.home-nav a:hover {
background: #fff;
color: #333;
}
.beg-vid-nav {
background: #1A3A4F;
}
.menu-primary li.beg-vid-nav a:hover {
background: #fff;
color: #333;
}
.set-word-nav {
background: #265573;
}
.menu-primary li.set-word-nav a:hover {
background: #fff;
color: #333;
}
.inst-word-nav {
background: #386D73;
}
.menu-primary li.inst-word-nav a:hover {
background: #fff;
color: #333;
}
.tools-nav {
background: #81A68A;
}
.menu-primary li.tools-nav a:hover {
background: #fff;
color: #333;
}
.contact-nav {
background: #9FBF8F;
}
.menu-primary li.contact-nav a:hover {
background: #fff;
color: #333;
}
.blog-nav {
background: #D4D9B0;
}
.menu-primary li.blog-nav a:hover {
background: #fff;
color: #333;
}
.nav-primary a:hover, .nav-primary .current-menu-item > a {
color: #333;
background: #fff;
}
.menu-primary a:hover {
-webkit-box-shadow: 5px 5px 5px rgba(50, 50, 50, 50);
-moz-box-shadow: 5px 5px 5px rgba(50, 50, 50, 50);
box-shadow: 5px 5px 5px rgba(50, 50, 50, 50);
}
.menu-primary a, .menu a {
color: #fff;
}
.genesis-nav-menu .sub-menu a {
color: #333;
}What Each Class Does
.home-nav – This is the unique class you can add to each menu item and use to style the static appearance of each menu item. In this case, its used to change the background color of each item. It changes when hovered using another class.
.menu-primary li.home-nav a:hover – These classes include both the custom classes added to each menu item and classes for which target the primary menu only. They also include the class which effects the hover color. In this case the hover color is set to white(#fff) for every item and the text color changes on hover to a dark grey(#333).
Each menu item includes the above styling.
.nav-primary a:hover, .nav-primary .current-menu-item > a – These classes effect the primary nav menu color for each item when the page is visited. They change the background color of each item to white and the text color to grey when the reader is on a page which is included in the nav menu.
.menu-primary a:hover – This CSS only effects each item when hovered over. In this code it adds a box shadow effect to each item.
.menu-primary a, .menu a – These classes only effect the static text color which i have changed to white.
No doubt there’s a lot more you can do to style each of your nav menu items using custom classes in your themes style sheet.
Here’s a few color tools you might like to use to choose which colors for each item.
Credit to @rfmeier for some of the code which i modified.
How about you? Seen any great examples of nav menu styling?
Hi, im reading this post only now, and tried it in my site
using the wordpress theme suffusion.
But it doesn’t work and exploring with firebug I find that the menu item 4131 is not affected by the class I added according to your suggestion.
Where am I wrong?
The menu item is that named “Forum”.
Firebug says:
where featmenu is my new class and the others are there presumably from the theme.
Thank you very much,
Antonello
Hello Antonello
The screenshot proves the code works but different themes use different classes so clearly your code will need to be modified as i tested this solution using Genesis and your theme is totally different.
This is super helpful, but I’m wondering if you can also use it to make it so that when hovering on a particular menu item (or when on that menu item’s page), you get a background image to show up with it. Haven’t tried it yet, but would that work?
I am new to CSS – could someone help me with the basic code that would be required to insert an image as a background to a menu item? Thanks!
You can add a custom class to each menu item under Appearance > Menus and then add a background-image for each custom class in your style sheet.
Brad, thank you, thank you, THANK YOU! This worked perfectly!
You’re welcome Deja.
Hi I’m not sure if you can help me but your page is the closest I’ve come to seeing my issue. My issue is that the active page is a different color and I don’t want that. I figured out how to make that stop but then it takes away the color change when you hover (which I want!)
Are you able to impart any wisdom?
Not sure i understand your question Jamie.
‘Just came across this old post – I think Jamie was asking how to style the a:active selector. Perhaps she did not realize that a:active has to come AFTER a:hover in the CSS definitions for it to be effective; if she was putting it before the hover selector, it wouldn’t work.
Thanks Suuzen.
Hi Brad
Very useful – once the menu items have a unique ckass you can do what you want with them.
Could use it to float that last menu item to the right and make it stand out from the rest.
Good stuff Brad.