Different color for each WordPress Menu Item

In a recent project I got a requirement that each menu item should be highlighted in different color when visited. The menu items and their required active colors were:

• Home — Green
• Portfolio — Blue
• Team — Yellow
• Contact — Red

These colors were to be applied only when that page is being visited otherwise color of menu item should be default black color.

So, if user is visiting home page then menu item should something like this

Home highlighted

And if user is visiting Portfolio page then menu should be something like this

Portfolio highlighted

Considering that this was a WordPress theme project where we were using Understrap as a base theme which is based on Twitter Bootstrap. So, when user visits, for example a home page WordPress will attach a .active CSS class to it. Taking advantage of that we added different classes for each menu item and then used following rule to make menu item colors different:

.navbar-nav > .home.active > a {
    color: green!important;
}
.navbar-nav > .portfolio.active > a {
    color: blue!important;
}
.navbar-nav > .team.active > a {
    color: yellow!important;
}
.navbar-nav > .connect.active > a {
    color: red!important;
}

CSS Class Chaining

We utilized the class chaining method here. If you note that .home.active classes are chained together without space and which means it will select an element with both these classes.

That did the trick and all menu items were in different color.

Originally published at J Talk’s