Site logo

Archived topic

Add background for current menu item in nav menu

3 replies · Started by Deepak on September 28, 2020

Viewing posts 1–4 of 4

Hello,

I have added a navigation menu in the right sidebar. Can you please help me with the CSS required to highlight the current item which is open

Like we have for primary and secondary navigation such as if I am on HOME then HOME button is with a different background color, so similar solution for this sidebar navigation menu.

I see primary navigation uses:
.main-navigation .main-nav ul li[class*="current-menu-"] > a

but I am unable to figure out the class to be used for side navigation menu for the page I have shared

Also please help with another css class to add a different background for visited menu item for the same navigation menu.

Regards
Deepak

Hi there,

did you resolve this? As the current menu item in them right sidebar is higlighted with a different background color.

To change a visited link color in that menu you would require this CSS:

#right-sidebar .menu-ansible-menu-container ul li a:visited {
    color: #f00 !important;
}

Hello David,

I had used below code but I was not able to see this working (after your message I checked in different browser and it seemed to be working so most likely cache problem

.inside-right-sidebar .widget ul li[class*="current-menu-"] > a {
    background: #cccccc;
}

But your code looks more precise, I have updated mine to

#right-sidebar .menu-ansible-menu-container ul li[class*="current-menu-"] > a {
    background: #cccccc;
}

Thanks for your help.

You're welcome - glad to hear you got it resolved.

This archived topic is closed to new replies.