Collapse one mobile sub-menu when another one opens

Support
#1

Is there a way to automatically collapse one mobile sub-menu when another one opens (so you don’t end up with a long row of multiple, open sub-menus?) My mobile sub-menus Navbar is Fixed. Please see Image

#2

Hello There,

Thanks for writing in!

To resolve your issue, please refer to this thread:

Hope this helps.

#3

Hello! Thanks Rad and RueNel for the replay but none worked properly.
Rad: Your code closes the entire NavBar when clicked on any menu title

RueNel: Your code Just highlights all the menu titles at once but doesn’t open them to view the subtitles

Thanks for trying. Can you please try again as i really need this working and anyone how can help. Thanks in advance.

#4

Hey There,

Sorry if it did not work. Please use this code instead:


jQuery(function($) {

  $('.x-sub-toggle').on('touchstart click', function(e){
    //e.preventDefault();
    $('.sub-menu').removeClass('in');
  });
});

We would loved to know if this has work for you. Thank you.

#5

ok now it is working better but not 100% When you click on a menu and it opens and you click another the previous one does close and the new one opens but the previous one is still highlighted which is causing a problem. Also If you click back on a menu that is already open instead of it closing it reopens. Take a look here 1klearns.com Thanks!

#6

Hey There,

Please update the JS code and use this:

jQuery(function($) {

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

Please let us know how it goes.

#7

Hello,

Its Still highlighting more than one menu and i think because of that its not working properly. See Image

#8

Hi,

Do you mind providing us your wordpress admin login in Secure Note

That way we’ll be able to edit code and test it right away.

Thanks

#9

Hi there,

Please update your code to this


      jQuery(function($) {

  $('.x-sub-toggle').on('touchstart click', function(e){
    //e.preventDefault();
    $('.sub-menu').removeClass('in');

    $('.x-sub-toggle').removeClass('x-active');
    $('.x-nav > li').removeClass('x-active');

    $(this).toggleClass('x-active').closest('li').toggleClass('x-active');
    $(this).parent().parent().toggleClass('x-active'); 

  });

});

That should work, cheers!

#10

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