Menu Link highlight (double)

[maggisam]

Hello,

On my website Rentadriver.is (one-page payout) I have the Book Now menu item highlighted by adding the current-menu-item class into WordPress menu as instructed by this guide https://theme.co/apex/forum/t/features-how-to-setup-one-page-navigation/96

However when I press any of the other menu links then the page scrolls down to that section and highlights the menu link as normal AND keeps the highlight on the Book Now Link???

How can I adjust the menu so that only 1 menu link is highlighted at each time?
Keep in mind that I want the 1st item Book Now to be highlighted on initial page load.

Best Regards
Magnus Gunnarson

[ruenel]

Hello @maggisam,

Thanks for writing in!

Please remove the custom “current-menu-item” that you have added in your first menu item.

And to make sure that the first menu item is highlight upon page loading, please add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb)

(function($){
	$(window).load(function(){
		$('.menu-item-10779 .x-anchor').addClass('x-currently-active');
	});
})(jQuery);

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

[maggisam]

Hello RueNel,

That sure did help
I was about to give up on this…

However There is still 1 minor bug left.
If I scroll down and then all the way up again to the TOP then the first item gets un-highlighted.

Any idea?

[ruenel]

Hi @maggisam,

The Menu highlight resets to no highlight as soon as you scroll top of the page. In your page, the first section has a padding of 100 pixel. Instead of adding a 100 pixel padding, please edit the page and insert an section with a column containing a gap or at least that this section simulates the 100 pixel padding. And then you update the JS code into this:

(function($){
	$(window).load(function(){
		$('.menu-item-10779 .x-anchor').addClass('x-currently-active');
	});

	$(window).scroll(function(){ 
		if( $(window).scrollTop() < 10 ) {
			$('.menu-item-10779 .x-anchor').addClass('x-currently-active');
			console.log($(window).scrollTop());
		}
	});
})(jQuery);

Hope this helps. Please let us know how it goes.

[maggisam]

I have followed your steps.
However things are still the same. Still un-highlighted on scroll top…

[ruenel]

Hey Magnus,

Please have the JS code updated and use this:

(function($){
	$(window).load(function(){
		$('.menu-item-10779 .x-anchor').addClass('x-currently-active');
	});

	$(window).scroll(function(){ 
		if( $(window).scrollTop() < 10 ) {
			$('.menu-item-10779 .x-anchor').addClass('x-active');
		} else {
			$('.menu-item-10779 .x-anchor').removeClass('x-active');
		}
	});
})(jQuery);

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

[maggisam]

Thank you so much RueNel

Everything is working fine now…

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.