Archived topic

Disable active page highlight in navigation

3 replies · Started by Matthew on February 5, 2019

Viewing posts 1–4 of 4

February 5, 2019 at 5:30 am #801892

Hi,

I have been trying to figure out how to disable the effect for the active page, I could like the navigation to work how it normally works even if you are on a specific page.

How can I disable the active effect so that hover over effects etc work like normal.

Thanks!

February 5, 2019 at 7:59 am #802170

Hi there,

try this:

.main-navigation .main-nav ul li.current-menu-item:hover>a {
    color: #fff;
    background-color: #f5b660;
}

February 5, 2019 at 11:10 am #802350

Hi David,

That is great thank - it's worked on the main menu but not the sub menus.

This code has really lost me as to how it worked to be honest so I can't replicate for the sub menus.

Thanks for your help!

February 5, 2019 at 12:37 pm #802421

Try this:

.main-navigation .main-nav ul li.current-menu-item:hover > a,
.main-navigation .main-nav ul ul li.current-menu-item:hover > a {
    color: #fff;
    background-color: #f5b660;
}

If you right click on the menu item and use the browser inspect, you can see the selectors.

This archived topic is closed to new replies.

Start building better websites today.