Archived topic
Showing the correct menu item as active
3 replies · Started by Roger on February 26, 2019
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!
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)
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.
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.
