Different colors for each active menu item in WordPress

Question

I have a menu in WordPress site with 4 items - Home - Portfolio - Team - Connect

I want to highlight menu item of current page being visited but each page should have different color. For example if I visit home page the Home menu item should be green.

If I visit portfolio page then portfolio menu item should be green.

score 0 · Answer 1 · answered Feb 13 '18 at 13:09

0

you can use like this

ul li.active:first-child {
  color:blue;
}

ul li.active:nth-child(2) {
    color: red;
}


ul li.active:nth-child(3) {
    color: green;
}

answered Feb 13 '18 at 13:09

Vel

9,027
6
34
66

score 0 · Accepted Answer · answered Feb 14 '18 at 05:20

I found a solution. Since theme is based on Twitter Bootstrap an .active class is added to the current page's menu item being visited. Therefore, I added a separate class like .home for home page, .portfolio to portfolio page, and then chain the classes to take effect like this.

.navbar-nav > .home.active > a {
    color: green !important;
}

Notice the .home.active classes are chained.

Following threads on SO were helpful.

css select an element with 2 class

CSS Selector that applies to elements with two classes

Different colors for each active menu item in WordPress

2 Answers2