WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm working on a website for a friend with small changes. She's running Twenty Eleven theme an she wants to make each link's bottom border (that I'll be putting in soon) a different colour. However with the CSS I'll be putting in, I only know how to make all of them a singular colour like this - https://dl.dropboxusercontent.com/u/85495001/nav.jpg

Is there a plugin or some extra code I can put into the navigation code of this theme to allow for this effect?

share|improve this question
up vote 1 down vote accepted

You can add custom html classes to each menu item and then use those classes to add the bottom border.

In the Admin Dashboard, under Appearance, click on Menus.

Select your menu and click the small down arrow to the right of the menu item box.

If the CSS Classes box is missing, Click the Screen Options tab at the top of the page and check the CSS Classes option.

In the CSS Classes box add the class for the color of the bottom border you want to used. For example nav-yellow, nav-green, etc.

In your style sheet, add the corresponding class styles:

.nav-yellow {

.nav-green {
share|improve this answer
Okay. I remember seeing that step but I never saw the classes so I was thinking it didn't come with the theme. But your scree options extra step helped! Thanks! – kia4567 Aug 4 '13 at 4:06

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.