By default, if we change background color or hover background color – the color of whole menu is changed. Do you want to style each menu item with different background color? Like first menu item has red color, followed by items with colors like: yellow, blue and so on. This is very easy to implement in any Genesis theme.

Preview: What we are trying to achieve

As seen in screenshot below, each menu item has different background color and hover background color.

Genesis Primary Menu with different color styles

1. Add code to style.css file menu item colors

Assuming that we are modifying color of each menu item in Primary Navigation. Add following code in style.css file.

https://gist.github.com/8934961

2. Assign color classes to menu items

Goto Apperance > Menu in your WordPress Dashboard. Then click “Screen Options‘ at the top right and click to check “CSS Classes” option.

Css Classes option for menus

Now expand first menu item and enter “redcolor” in CSS Classes box. Similarly, add yellowcolor, bluecolor to other menu items. Save the menu and now each menu item will display different background color.

Assign class to specific menu item

Using same procedure, you can create more color styles for more menu items. You can change font color and font style for every color class by adding color: options. Same can be implemented for secondary menu by using subnav class in place of nav class.

Video: Different CSS Style for Genesis Menu items

Share on LinkedIn

Davinder Singh Kainth

A digital creator with 15+ years of experience in Website Design, Development, SEO, and Content Creation to Podcasting at SmartWebCreators.com with the motto of "Be Smart, Keep Creating". A coach, consultant, and your dear geek friend ❖

5 Comments

  1. Bele on May 22, 2014 at 3:39 am

    Hi, this is exactly what I was looking for, thank you! Do you know how I can make each menu a different height as well? For example menu item 1 48px, menu item 2 46px, menu item 3 48px, menu item 4 46px and so on.

    Reply
    • Editor on June 22, 2014 at 6:05 pm

      Try adding different height values to each menu item class, should work.

      Reply
  2. Jose Aguirre on May 28, 2014 at 8:58 pm

    Hi. There’s a black separation between each item in the menu, Is there a way to group the items without the separation? Like this site: http://www.focuspmg.com/ Thanks! PD: Sorry my bad english.

    Reply
  3. Stephanie on September 26, 2014 at 2:22 pm

    This is the exact solution I was looking for – something simple and easy!
    Many of the other solutions involved hard coding your menu links, or creating elaborate if statements based on the name, it all seemed ridiculously unnecessary.
    Thank you!

    Reply
  4. Nitin on June 26, 2015 at 6:08 am

    Awesome tutorial Davinder!!
    I’ve always been so crazy about Genesis Customization. And the article is quite necessary for me. I’ll give it a try.
    Thanks for sharing the information.
    -Nitin

    Reply

Leave a Comment