Pro Header Builder - Active state on different pages?

[dgoldwas]

Is there any way to make it so that the navigation in the Header Builder will highlight the current page? i.e. if I’m on the “About” page, then the “About” menu item would be highlighted (as if the mouse had rolled over it). This used to work fine in the basic X Theme header, but with the new Pro Header Builder it doesn’t seem to work

Example of it working (normal “X Theme”):

Contact - Family Guy Soundtracks

Example of it not working (“Pro” theme with header builder)
http://harmonicentertainment.com/contact/

Any ideas?

Thanks!
Dan

[fforward]

I emailed support about this exact question. The response I got yesterday was as follows (though I did not get to try it yet):

Thanks for writing in! I presume that you are speaking of the fact that in the header when you click through on a link that the “active” state should stay in place? If that is the case, this is something that we are aware of and have plans to address this in a coming update, but at the time we have a few other items we are working on at the moment as it requires a bit more work to ensure everything is working properly. For the time being, you could copy the “hover” styles of your links as you’ve designed them and use WordPress’ native classes that are output on the menu on certain pages to ensure an “active” state matches your interaction state. Hopefully this helps to point you in the right direction.

[dgoldwas]

Thanks for the update… I guess I’ll have to “manually force it” with CSS for now. Good to know that they’re aware of the issue!

Thanks

[kory]

Hey, everybody! Yes, that is correct that at this time “current menu items” do not have any styling in Pro. It is certainly something we are aware of and are looking into the cleanest way to implement it into the theme down the road, but you can definitely target classes you need with custom CSS for the time being.

Cheers!

[dgoldwas]

Thanks @kory, glad to know it’s on the to-do list down the road!

[matthijssmeets]

Customizer -> Custom-> EDIT GLOBAL JAVASCRIPT

setInterval(  function() {
jQuery( '.current-menu-item a' ).each( function() {
 
jQuery(this).addClass('x-interactive');
jQuery(this).parent().find('a > span > span').addClass('x-active');
 
} ); }, 300);

[dgoldwas]

Thank you @matthijssmeets - that is perfect!!

[JvP]

Glad to hear you guys are gonna add this in a future update. Also, could you look into adding an onclick event? So we can customize the appearance/behaviour when you click/tap on an element?

[christian]

Thanks for chiming in @matthijssmeets

@JvP I’ll post your concern on our feature request list. Please stay tuned if it will be implemented.

Thanks.

[JvP]

Thanks @christianynion