Customize main menu colors with CSS?


  • Question

I'm trying to customize the main menu items to each be a different color (or possibly background, if that looks better); I'd also like to have some distinguishing difference on the active page menu item. I'm assuming both of these are possible with a CSS injector rule - I was able to change the font that way - but I can't figure out the correct way to write the code for the colors on each menu item. Has anyone figured this out or seen a site where it's done? Thanks in advance...


The menu items don't have unique css classes (unless you only have two items, in which case the first one is .first and the second is .last), so you can't define different colors by css class. However, you can use the CSS3 nth-of-type property. For example, if you want to set the background color of your main menu items, you can do:

#block-system-main-menu ul li:nth-of-type(1) {
background-color:#ff0000; /* sets background of first menu item to red */
#block-system-main-menu ul li:nth-of-type(2) {
background-color:#000; /* sets background of second menu item to black */


Hope that helps!


This worked perfectly. Thank you!