Highlight active page menu item on one page menu

[yingfuli]

Hi,

I have made a one page menu with Header Pro. How can I get the active menu-item to keep the highlighting color when hovered? I can get as far as highlighting the menu item for ‘Home’ but when clicking the other menu items they remain de default color whereas the ‘Home’ menu item remains highlighted.

I guess it has to with the menu being a one pager but there should be a way to accomplish this. Also before I used the menu set-up in Theme Options and there I had no problem whatsoever on this issue. Please solve this. I searched the forum and read that as far back as July 2017 this was a feature on the development list. What gives? This should be in Header Pro already.

[nabeel]

Hi there,

Thanks for writing around! Try adding the following code in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('header ul li').each(function(){
		$(this).removeClass('current-menu-item');
	});
	
	$('header ul li').click(function(){
		$('header ul li').each(function(){
			$(this).removeClass('current-menu-item');
		});
		$(this).addClass('current-menu-item');
	});
});

Then add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.current-menu-item {
    background: #00dcff;
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[yingfuli]

Hi,

That’s not what I meant.

This is the homepage menu:

This is when hovered:

This is when active:

What I’d like is for ‘active’ to be this:

[albrecht]

Hi There,

Can you send your website/page URL in a secure note so that we can have a look and suggest you a solution.

Thanks

[yingfuli]

Hi, no need for a secure note: http://zentire.nl

[ruenel]

Hey There,

Thanks for providing the url of the site. To resolve your issue, please add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb)

(function($){
    $(document).ready(function(){
        $('.menu-item').each(function(){
            if ( $(this).hasClass('current-menu-item') ) {
                $(this).find('.x-anchor-menu-item').addClass('x-interactive');
                $(this).find('.x-anchor-particle-primary').addClass('x-active');
            }
        });
    });
})(jQuery);

We would loved to know if this has work for you. Thank you.

[yingfuli]

Hi,

It does activate ‘Home’ but not the other menu items: it remains on ‘home’.

[ruenel]

Hello There,

Where did you added the code?

Please update it and use this:

(function($){
    $(document).ready(function(){
        $('.menu-item').each(function(){
            if ( $(this).hasClass('current-menu-item') || $(this).hasClass('current-page-item') || $(this).hasClass('current-menu-parent') ) {
                $(this).find('.x-anchor-menu-item').addClass('x-interactive');
                $(this).find('.x-anchor-particle-primary').addClass('x-active');
            }
        });
    });
})(jQuery);

Please let us know how it goes.

[yingfuli]

Added it in Global JS, still doesn’t work. Only ‘Home’ gets a highlight, all the other menu items that are linked to sections don’t.

[ruenel]

Hey There,

The code will only work with menu linked to normal pages. I’ve taken a closer look at your menu and it turns out that you are using one page navigation in Pro. Regretfully the one page navigation is not yet fully supported in Pro. This is why there is no indication that the current menu item is on the linked section. This issue is already in our to do list. A new update will be releasing soon which will address this situation.

Thank you for your understanding.

[yingfuli]

Okay. I did point that out in the original post though. I do hope that you’ll fix all those little nuisances that shouldn’t have been there in the first place. I think I said it before in another thread that Pro has been released too soon.

[ruenel]

Sorry for the confusion.
Please bear with us.