Tap Anywhere on Mobile Menu Item for Dropdown

Hi there,

I have clients complaining that the mobile menu is not intuitive to use because you need to tap the arrow to open the dropdown, and if you tap the menu item itself, nothing happens.

I found this code on other topics and it worked for those customers, but it doesn’t seem to work for me:

jQuery(‘.mobile-nav’).on(‘click’, ‘.site-mobile-menu > li.menu-item-has-children > a’, function(e){
e.preventDefault();
jQuery(this).parent().find(‘.icon-sub-menu’).click();
});

I’ve tried it both on document ready and in the global custom JS fields with no luck. I’ve included access to my staging area so you can have a look.

Thanks!

Hello,

Try to replace the code with the following

jQuery('.mobile-nav').on('click', '.wd-nav-mobile > li.menu-item-has-children > a', function(e){
   e.preventDefault();
   jQuery(this).parent().find('.wd-nav-opener').click();
});

Kind Regards

Wonderful, that works wonders!

One issue though, if the dropdown menu item has another dropdown submenu within it, when you open the first layer by tapping the text, all other layers open by default and it is confusing. If you click the arrow instead of the text, submenus are shown, but closed as they should be.

Is there some piece of the code you shared that can be changed to stop the submenus from opening by default?

Thanks again!

Try to replace the code with this one

jQuery('.mobile-nav').on('click', '.wd-nav-mobile > li.menu-item-has-children > a', function(e){
   e.preventDefault();
   jQuery(this).parent().find('> .wd-nav-opener').click();
});

Thanks very much!

Sorry to bug you again, but I just realized that the latest code you shared works perfectly for top layer submenus, but when trying to open the second layer submenu, you have to click the arrow again.

Any suggestions to edit that code snippet?

Thanks

Here is the right code for all levels

jQuery('.mobile-nav').on('click', '.wd-nav-mobile li.menu-item-has-children > a', function(e){
   e.preventDefault();
   jQuery(this).parent().find('> .wd-nav-opener').click();
});

Hi, this code no longer works.

Can you please provide an updated script for this function?

Thanks

Hi,

Could you please send us a link to your website where we can see this issue? Make sure that the code is currently added to your website.

Kind Regards

The code is currently implemented on document ready in custom JS panel of theme . Check private area for site details.

Hello,

As we can see, the code is working correctly on your website at the moment https://gyazo.com/b1841457b3698dbda55e15f7b057a785

Kind Regards

[Author]

Posts