Navigation Inline doesn't hide after click

Hi, in this link: https://www.oneegg.com.au/case-studies-test/, once you hover on “Select Client” and click on “legal Vision” for example, the dropdown menu doesn’t hide. Making it hard for mobile visitors to navigate without clicking outside the menu. Because it only closes when you click outside. How do we hide the drop down after a click?

Hey @ilan_sh,

Regretfully, this would currently require a bit of custom Javascript. For now, please assign a custom class for your Navigation Dropdown like this:

Then, add this code in your page’s Content JS. Remember to change the selector in the code too. The selector in the sample is the .custom class.

(function($) {
	$('.custom .x-anchor-menu-item').on('click touchend', function() {
		$('.custom .x-anchor-toggle').trigger('click')
    })
})(jQuery)

Hope that helps.

Hi, it doesn’t work. I think it’s because the navigation is triggered by hovering and not by clicking.

Hello @ilan_sh,

You may update the code into this:

(function($) {
	$('.custom .x-anchor-menu-item').on('click touchend', function() {
		$('.custom .x-anchor-menu-item').removeClass('x-active').removeClass('x-interactive');
		$('.custom .x-dropdown').removeClass('x-active');
    })
})(jQuery);

We would love to know if this has worked for you. Thank you.

Thanks! That Worked.

Hi,. there seems to be a new problem. On mobile, when you scroll through the list, it disappears because the “click touchend” is trigger even when I’m just scrolling down to view the list. How to trigger only “clicks” and not “scrolling”?

Hello @ilan_sh,

Please know that on touch devices there are no clicks. Only taps and swipe are the screen events for touch devices. If you only want clicks, then you use this code:

(function($) {
	$('.custom .x-anchor-menu-item').on('click tap', function() {
		$('.custom .x-anchor-menu-item').removeClass('x-active').removeClass('x-interactive');
		$('.custom .x-dropdown').removeClass('x-active');
    })
})(jQuery);

Please let us know if this works out for you.

But the main issue is on mobile. Now I’ve tried this, it doesn’t work anymore. What I mean by “scroll” is “swipe”. When I swipe the device, the list closes. Would you like to try it yourself? I can give access.

Never mind, I got the idea and did this. Since only the first option is required to hide:

(function($) {
$(’#menu-item-3452 > a’).on(‘click touchend’, function() {
$(’.custom .x-anchor-menu-item’).removeClass(‘x-active’).removeClass(‘x-interactive’);
$(’.custom .x-dropdown’).removeClass(‘x-active’);
})
})(jQuery);

Great! It’s good to know that you have figured it out a way to correct the said issue.

Cheers.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.