Changing The Color Of Each Nav Menu Item

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  {<br />
background: #386D73;
}

.menu-primary li.inst-word-nav a:hover {
    background: #fff;
    color: #333;
}

.tools-nav {<br />
background: #81A68A;
}

.menu-primary li.tools-nav a:hover {
    background: #fff;
    color: #333;
}

.contact-nav {<br />
background: #9FBF8F;
}

.menu-primary li.contact-nav a:hover {
    background: #fff;
    color: #333;
}

.blog-nav {<br />
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.

<h3

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?

Posts Related To Styling Your Nav Menu

• Style First Nav Menu Item Using CSS
• Add a Custom Class & Style Specific WP Nav Menu Items Conditionally
• Changing The Primary Navigation Colors In StudioPress Themes