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