How to Have Different Background Color for Each Navigation Menu Item?

Do you want to have different colors for each of your navigation menu item? See example as below.

If yes, there are few ways to achieve this in Headway Themes but in this post we are going to make use of WordPress (only version 3.0 and above has this feature) customized menu feature to achieve this. The customized menu has a “CSS classes” properties that help to style your navigation menu item to your desire.

The first step is to create a new menu in your Wordpress.

1. Log into your WordPress.
2. At your WordPress dashboard, go to left side panel, hover over Appearance and click on Menus.
3. To create a new menu, type in a name for e.g. main-menu besides the menu name.
4. Click on the green button Create Menu to save the name.
5. Move your mouse over to the left and under the Pages, click on View All to see all your menu items, check on the boxes that those that need to go into your navigation menu.
6. Click on Add to Menu to add all the selected menu items to the newly created menu.
7. Once done, you can see your menu structure. Click on individual menu item and it will expand with more options.
8. By default, the CSS classes is being hidden so you need to enable it at Screen Options and it is located at the top right corner.
9. Click on the Screen Options tab and more options are shown.
10. Under Show advanced menu properties, check on CSS Classes.
11. You can click on Screen Options tab to close it.
12. Once done, you can immediately see CSS classes (optional) appear below the Navigation Label.
13. Now you can enter the name of CSS classes you have created in the individual menu item like the screen below.

14. Refer to below section - How to define CSS Classes for Navigation Menu Item if you do not know how to define the CSS classes.
15. In the first menu item, type in Red at the CSS classes, the second menu item is Green and the last is Blue.
16. Once you have entered the CSS class names, click on Save Menu to save.
17. You can refresh your browser and check your navigation menu items are in different colors as you specified.

How to define CSS Classes for Navigation Menu Item

1. Go to Headway > Visual Editor > Design.
2. At the top menu of Design mode, click on Live CSS under Tools.
3. In the Live CSS, define the different color of CSS classes as below.

/*DIFFERENT BACKGROUND COLOR FOR DIFFERENT NAVIGATION ITEMS */

.red { background-color:#e24d4d;}

.blue { background-color:#72c7ee;  }

.green { background-color:#d5ee72;  }

.orange { background-color:#eeb572; }

4. Once done, go to the top right corner of the screen and click Save to save.

Change the Hover & Text Color

If you want the color to change to another color when you hover over the individual menu items, you can do so by adding the following CSS code.

/*CHANGE THE HOVER & TEXT COLOR*/

.red a:hover, .blue a:hover, .green a:hover, .orange a:hover { background-color:#613000; color:#ffffff!important;  }

Please note that the above code assigns the same hover colors for all the menu items, if you want different hover colors, you have to declare different background-color for each of them. The !important is added to override the default text color, without it, the text color will not change when hover over it.