Docs

[oakidoaki]

Hi! An annoyance: When I using a mobile combined with a One Page menu the menu doesn’t close on id-links (#). It hides the section that is navigated to, and is confusing for some users.

Any way simple way to do this?

I think the menu should close / roll up on any click.

Example site http://rosegull.no – hit for instance “Om”

[Nico]

Hi There,

Thanks for writing in! To fix your issue, please add the following jQuery script via Appearance > Customize > Custom > Javascript

jQuery(document).ready(function($){
	$('.menu-item a').click(function(){
		$('.x-nav-wrap.mobile').removeClass('in');
	});
});

Don’t forget to clear your browser’s cache after adding the code.

Let us know how this goes!

Thanks.

[oakidoaki]

Thanks, it works when I’m using a PC and mouse click. But on the mobile I can’t see any change.
I’m using Chrome in incognito to avoid the cache.

Is there another event than “click” that should be used?

[Lely]

Hello There,

Please update the code to this:

jQuery(document).ready(function($){
	$('.menu-item a, .x-navbar .x-nav-wrap.mobile a').on('touchend click', function(){
		$('.x-nav-wrap.mobile').removeClass('in');
	});
});

Hope this helps.

[oakidoaki]

It did it, thank you 🙂

[Paul R]

You’re welcome! 🙂

[oakidoaki]

Actually, this got it working like it should for me:

jQuery(document).ready(function($){
	$('#menu-one-page-menu-1 .menu-item.menu-item-type-custom a').on('touchend click', function(){
		$('.x-nav-wrap.mobile').removeClass('in');
	});
});

[Rad]

Glad to hear that and thanks for sharing 😉

[Author]

Posts