Auto Close Mobile Menu JS

[jacobted]

Hello! I found some code through the forums that auto closes the nav bar on mobile when a user clicks it. My website uses multiple one page nav menus and some of those have submenus that, when expanded, cover up the entire screen on mobile. To get rid of the clutter and clean things up I used this code:

jQuery(function($) {
$(’.mobile .x-nav a’).on(‘touchend click’, function(){
$(’.x-btn-navbar’).click();
});
});

The only problem is that it auto-closes the downward arrow icon that expands the submenu along with all the other menu items. Everything else works just as it should. When they click, it closes up the menu and moves to the spot on the page it needs to. Is there something I can do to get all of the menus to auto-close on touch except the expand submenu arrows? I appreciate any help you can give me. My website is on a test url at testing.mccullersbrothers.com

[rad]

Hi there,

Thanks for writing in.

Try changing your script to this,

jQuery(function($) {
$('.mobile .x-nav li:not(menu-item-has-children) > a').on('touchend click', function(){
$('.x-btn-navbar').click();
});
});

Thanks!

[jacobted]

Hi Rad! Thanks so much for your response. I placed your script in the custom JS and replaced my old script in there and the double arrow still auto closes when I touch it on mobile. I really appreciate your help on this.

[jacobted]

Do you have any other suggestions for the script that I could try out? I’ve cleared my cache and tried safari and chrome on my iPhone and the arrows still auto-close on touch.

[ruenel]

Hello There,

Please update the JS code and use this:

jQuery(function($) {
  $('.mobile .x-nav li:not(.menu-item-has-children) > a').on('touchend click', function(){
    $('.x-btn-navbar').click();
  });

  $('.x-sub-toggle').on('touchstart click', function(e){
    e.preventDefault();
    $(this).toggleClass('x-active').closest('li').toggleClass('x-active');
  });
});

Please let us know how it goes.

[jacobted]

Thanks so much! I think that worked. I have been testing it in responsive design mode in Safari and also on my iPhone in Safari and Chrome. I really appreciate you guys. Your support team is really great

[friech]

Our pleasure! we’re happy to assist you with this.

Cheers!