Greg Greg - 2 months ago 8
CSS Question

Active menu item doesn't stay colored despite li.active is set

I'm using wordpress for my website.

I'm trying to get my navigation menu items stay colored when the menu item is active. For instance I would expect the menu link "2010 to date" to remain colored in blue (#5599F4) on this page: https://www.si-la-gi.com/art-works-2010-to-date/

I'm using the code below but for some reason that does not work, any idea what the issue is? (apologies if I did not put the entire code in my post but wordpress code is a bit messy - hopefully the link above will help you to assist me)

Many thanks

.vertical_menu .second .inner > ul > li.active > a {
color: #5599F4 !Important;
font-weight: 600 !Important;
}

.vertical_menu .second .inner > ul > li.active > a:before {
content: "• ";
color: #5599F4;
margin-left: -9px;
}

Answer

You can add this to target the current_page_item. Thats the class already being added to the menu item for the current page.

.vertical_menu .second .inner .current_page_item a {
  color: #5599F4;
  font-weight: 600;
}
.vertical_menu .second .inner .current_page_item a:before {
  content: "• "; 
  color: #5599F4;
  margin-left: -9px;
}