Home › Forums › WoodMart support forum › Tap Anywhere on Mobile Menu Item for Dropdown
Tap Anywhere on Mobile Menu Item for Dropdown
- This topic has 10 replies, 2 voices, and was last updated 2 years, 1 month ago by Artem Temos.
-
AuthorPosts
-
March 5, 2022 at 11:36 pm #357718
jgParticipantHi 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!
March 6, 2022 at 7:31 am #357754
Artem TemosKeymasterHello,
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
March 6, 2022 at 7:47 am #357762
jgParticipantWonderful, 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!
March 6, 2022 at 10:44 am #357824
Artem TemosKeymasterTry 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(); });
March 6, 2022 at 7:14 pm #357993
jgParticipantThanks very much!
March 7, 2022 at 5:10 am #358080
jgParticipantSorry 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
March 7, 2022 at 6:33 am #358113
Artem TemosKeymasterHere 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(); });
November 19, 2022 at 1:45 am #422163
jgParticipantHi, this code no longer works.
Can you please provide an updated script for this function?
Thanks
November 21, 2022 at 10:50 am #422429
Artem TemosKeymasterHi,
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
November 21, 2022 at 10:43 pm #422640
jgParticipantThe code is currently implemented on document ready in custom JS panel of theme . Check private area for site details.
November 22, 2022 at 10:35 am #422709
Artem TemosKeymasterHello,
As we can see, the code is working correctly on your website at the moment https://gyazo.com/b1841457b3698dbda55e15f7b057a785
Kind Regards
-
AuthorPosts
Tagged: mobile menu
- You must be logged in to create new topics. Login / Register