Mutli Color Menu Items in WordPress

[kblake]

I have five menu items in my main navigation and would like each one to be a different color. In addition, each menu item will have a vertical side drop (to the right) that will need to have the same color as its parent. I know how to do this for basic html, but don’t know where to start for adding this function to WP. Any advice or resources would be greatly appreciated.

[brentwpowell]

utilizing some CSS3 selectors you could utilize the :nth-of-type(n) selector to target each list item as such:

.menu li:nth-of-type(1) { background:red } /* targets the first list-item and applies a red background */

.menu li:nth-of-type(2) { background:green } /* targets the second list-item and applies a green background */

.menu li:nth-of-type(3) { background:blue } /* targets the third list-item and applies a blue background */

Keep in mind that this doesn’t have any support on IE8 or earlier without a work around. The other way that you could address this is by looking at what classes your WordPress theme, by default, applies to the menu structure. Once you have those, modify your CSS to match those classes up with some rules for background color.

[kblake]

I did think of the second option you suggesetd, but once a page is added the css needs updated every time, which is no biggie.

I also considered creating 5 wp_nav_menu functions, but that doesn’t seem like a proper method.

[kblake]

I’m not sure when this was implemented into WordPress as I just discovered it, but you can add a class to a menu item in the WP Dashboard. Appearance > Menus go to Screen Options to make sure the class option is visible.

[Author]

Posts