[Support request] Showing the correct menu item as active

[Roger]

Hey, I’ve added a menu item to the primary navigation which is an anchor to a specific point on the page – /consulting#energy-modelling. As the consulting page itself already features as a menu item on the primary nav /consulting, I’m having difficulty figuring out how to have the correct menu item highlighted – currently both are.

Grateful for any help in solving this one!

[David]

Hi there,

the easiest way when dealing with only one ( or two ) on page links is to give that menu item a custom CSS Class and then style that directly.

You can also include it in your menu underline styles as a :not(.custom-class) so it does get the current menu item underline. You can string nots together e.g :not(.nav-button):not(.custom-class)

[Roger]

The problem is that the .current-menu-item class is assigned to both the /consulting and /consulting#energy-modelling menu items, as they both link to the same page. I need a way to set .current-menu-item or an alternative active class based on url.

[David]

Looks like you resolved it?

As a note this class: menu-item-object-page only appears on the actual page menu item, not on-page links.

[Author]

Posts