How to make each Menu item of different color in Genesis
Updated On May 23, 2015 February 11, 2014 -Written ByBy 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.
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.
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.
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.
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.
Try adding different height values to each menu item class, should work.
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.
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!
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