• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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.

Style Nav Menu Items Different Colors

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.

screen options

Next step is to add a unique name to the CSS classes field for each menu item.

menu item css classes

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.

Note: CSS code changes may not show up immediately due to browser & server side caching.
/**
* @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

Nav Menu

Reader Interactions

Comments

  1. antonello says

    July 29, 2014 at 10:44 pm

    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

    Log in to Reply
    • Brad Dalton says

      July 30, 2014 at 2:50 am

      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.

      Log in to Reply
  2. Jessica says

    July 7, 2014 at 6:49 pm

    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!

    Log in to Reply
    • Brad Dalton says

      July 7, 2014 at 7:18 pm

      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.

      Log in to Reply
  3. Deja says

    June 24, 2014 at 1:50 pm

    Brad, thank you, thank you, THANK YOU! This worked perfectly!

    Log in to Reply
    • Brad Dalton says

      June 24, 2014 at 1:57 pm

      You’re welcome Deja.

      Log in to Reply
  4. Jamie says

    November 9, 2013 at 8:49 pm

    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?

    Log in to Reply
    • Brad Dalton says

      November 9, 2013 at 11:08 pm

      Not sure i understand your question Jamie.

      Log in to Reply
      • Suuzen says

        March 12, 2014 at 7:48 pm

        ‘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.

        Log in to Reply
        • Brad Dalton says

          March 12, 2014 at 7:56 pm

          Thanks Suuzen.

          Log in to Reply
  5. Keith Davis says

    June 29, 2013 at 10:28 am

    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.

    Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.