Active Menu Highlight for Child Pages

[rangestech]

I’m trying to make a top level menu item active when on one of its child pages.

I already have the JS script for .current-parent-page active on the header though not seeing the desired behaviour:

setInterval ( function(){ 

jQuery('.current-menu-item > a').addClass('x-active');
jQuery('.current-menu-item > a .x-particle').addClass('x-active');
jQuery('.current-page-parent > a, .current-menu-parent > a').addClass('x-active');
 }, 500 );

I’m hoping to make active the ‘current’ menu item (blue color and gold particle) when on a child project page e.g. https://davidliddiard.com.au/current/hampton-project

Any ideas here?

[rad]

Hi @rangestech,

Thanks for reaching out.

The missing selector is .current-page-ancestor

You can change your code to this

setInterval ( function(){ 

jQuery('.current-menu-item > a, .current-page-parent > a, .current-menu-parent > a, .current-page-ancestor > a').addClass('x-active');

jQuery('.current-menu-item > a .x-particle, .current-page-parent > a .x-particle, .current-menu-parent > a .x-particle, .current-page-ancestor > a .x-particle').addClass('x-active');


 }, 500 );

This should serve as a snippet and only good when it’s given. It may not work in the future and we can’t provide support or maintenance related to this code.

Thanks!

[rangestech]

Worked a charm - thanks

[thai]

You’re welcome.