Auto closing menus dropdown on one navigation page

[tafarelli]

Hi, I am using pro theme and have set up one page navigation with different headers on different devices. Now, is there a way to autoclose dropdown menu item when tapped on mobile device (since it points to anchor and stays open by default since the page isn’t reloading)?
Many thanks for any help, DK

[friech]

Hi There,

Thank you for writing in, this is actually on our issue tracker and it has been marked as fixed. Please stay tune for the next release. Sorry we can not provide an exact date of the next release though.

Cheers!

[tafarelli]

ok, thank you, that is very nice to hear… cheers

[nabeel]

You’re welcome!

[dsmillie]

Hi. Is there any interim fix you can suggest for this while we wait for the next release?

[thai]

Hi @dsmillie,

You can try adding this custom CSS under Pro > Theme Options > CSS:

jQuery(function($) {
	$('.x-menu li.menu-item a.x-anchor').on('click touchend', function(event) {
		var button = $(".x-off-canvas-close");
		if( button.length > 0 ){
			button.trigger('click');
		}
	});
});

Hope it helps

[dsmillie]

Thanks @thai. Unfortunately, it didn’t seem to have any effect. The dropdown menu still stays open when clicking on a link until you manually close it.

[nabeel]

Hi again,

Please replace the previous code with the following code:

jQuery(document).ready(function($){
	$('.x-menu.x-menu-dropdown .x-anchor').on("click touchend", function(event) {
		if ($(event.target).attr('class') != "x-anchor-sub-indicator") {
			$('.x-anchor-toggle').click();
		}
	});
});

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

[dsmillie]

It works perfectly! Thank you so much.

[basanta]

you are most welcome!