Active Parent Menu Highlight for Child Pages

[Timmid]

Hi Themeco,

On this website i’m working on I would like to have the parent menu item be highlighted when a user is on one of it’s child pages.

I found a post with a JS code that works with normal pages with child pages:

Active Menu Highlight for Child Pages

But I also would like to have this on the blog page and some custom post types I have on the website. So when on a single post that also the archive link in the menu is highlighted.

Hope you can help.

[ruenel]

Hello Tim,

Thanks for writing in!

The pages are not related whatsoever so we cannot call them as chil pages. The “Verhalen” page is an archive page while those links inside that page are taxonomy pages. You will have to use custom CSS instead to be able to change the color to the “Verhalen” menu item when the user is viewing any of those taxonomy archive pages.

Using your browser’s Development Tool, you can check the live HTML code and find which CSS selector you need to use or what CSS code has been used to style the page.

Check out this video demonstration:

Dev Tools demo

In your case, you have this one:

where you can formulate this example CSS:

.term-klooster #menu-item-154 .x-anchor .x-anchor-text-primary {
    color: red;
}

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Be advised that custom CSS coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

[Timmid]

Hi Ruenel,

Thank you so much. With your suggestions I managed to find the right codes to make the “Verhalen” main menu item highlighted when visiting a therm page and visiting a single post.

Only one thing I can’t figure out. I have 2 menu’s. One staying on the top of the page and one sticky menu visible when scrolling on the page.

When I’m inspecting they have the same “menu item” class but the code doesn’t work for the sticky menu only the one on top of the page. Can you explain to me how to make your given code target the sticky menu when scrolling the page?

Thank you in advance.

[ruenel]

Hello Tim,

You will have to find the menu item ID of the Sticky menu.
As an example;
#menu-item-154 - this is an ID
.menu-item-154 - this is a class

Hope this helps.

[Timmid]

Thank you.

Couldn’t find an ID in the sticky menu, the “top” menu does have a ID. But when added the class in the code it worked.

[marc_a]

Hey Tim,

We’re glad that it is now working properly on your end.

Thank you.