How to set Pro header menu to highlight current page in a different color

Support
#1

Hey Pro team,

I’m working with the custom headers and I’m hoping to find out how I can highlight the current page menu item as a different color as you would see in most navigation bars. At the moment when I hover on each element the interaction sets a different colour, but when I navigate to one of the pages on the menu that menu item doesn’t change colour to indicate I’m on that page.

Could you point me in the right direction with this one.

Thank you!

1 Like
#2

Hi There,

Thank you for writing in, this is actually a feature that has been submitted. And our Dev Team are looking a way to implement this. Regretfully we can not provide an ETA on when this feature will be implemented.

For now you can try adding the custom JS below on Theme Options > JS

/*temporary fix - active menu styling*/
setInterval ( function(){ 

jQuery('.current-menu-item a').addClass('x-active');
jQuery('.current-menu-item a .x-particle').addClass('x-active');

 }, 500 );

This should provide your active menu the same style as the hovered. Keep in mind that this is just a temporary fix and we can not provide further customization from here.

Cheers!

2 Likes
#5

Hey Friech, Thank you,

The Javascript works perfectly for both header and off-canvas menus. I had additional styling for the menu items on hover, so I needed to add a styling element to the .current-menu-item class and it works with the JS you suggested.

I had some styling issues on the off-canvas menus, but these were solved by some styling through the Header builder, while limited styling was possible through the menu item classes. Fiddling with both I was able to get the result. Looking forward to future updates. Thanks again.

#6

Cool, we’re delighted to assist you with this.

Have a nice day,
Cheers!

#7

Hi Friech,

I’ve had an additional problem come up with regards to the WPML language selector in the off canvas menu. The menu will highlight the current language in other areas of the site, but when inserted into the off-canvas menu it doesn’t appear to respond to the current language. Have you come across this issue yet by any chance, or have a work around you might suggest.

With regards,

#8

Hi There,

The current menu item styling is something that we have on our development list, we have a good path forward toward this but we cannot implement any of these changes at this time as we have too much waiting on a development that could cause some significant merge conflicts, which we don’t want to have down the road with something as crucial as this.

The code given above serves only as a general solution. Regretfully, further customization from there will fall outside of the scope of our support.

Thank you for understanding,

#9

Hi there,
i tried with custom css (after newest update):

.current-menu-item .x-anchor-text-primary {
color: rgb(157,193,18) !important;
}

has anyone a better solution? Menu items in the submenu are also highlighted.
http://stage.fcg-bielefeld.de/ueber-uns/

#10

Hi @kevin_hermann,

Thanks for writing around! Please replace your code with this:

.current-menu-item > .x-anchor-menu-item .x-anchor-text-primary {
    color: rgb(157,193,18) !important;
    text-decoration: underline;
}

Cheers!

1 Like
#11

@Nabeel, @kevin_hermann
Hey guys,

Thank you very much for your contributions. I’ve amended the first class for use with WPML plugin menu in off-canvas area as below and it works perfectly. Thank you very much.

.wpml-ls-current-language > .x-anchor-menu-item .x-anchor-text-primary {
color: #ea5353 !important;
border-bottom: 1px solid #ea5353;
}

#12

Glad we could help.

Cheers!

#13

Hey There,

I’m trying to achieve this same effect on my site: thebackpackerstrowel.com

I’m using the header builder in X Pro

I copied that JS into Theme Options > JS but didn’t see any change. I’d like the menu item to hold the hover styling when the user is on that section of the page. Is it having issues because it’s a one page nav?

Thanks!

#14

Hey @Mattchenot,

The JS won’t work as you’ve one page navigation and the feature is in our development list as mentioned by Friech https://theme.co/apex/forum/t/how-to-set-pro-header-menu-to-highlight-current-page-in-a-different-color/8622/8

Thank you for understanding!

1 Like
#15

Hi,

I am also interested in this feature. Was this included in the Nov 15 Pro update? I couldn’t figure out how to read discrete items in the changelog.

For my purposes, it would also work if I could set the interaction effect of a button to be triggered given a particular active page. Might there be a javascript or CSS workaround to achieve that?

Thank you,

#16

Hi,

It hasn’t been included yet.

Your interest on this has been noted.

Thanks

1 Like