Hamburger menu not collapsing…

Support
#1

Hi. I have a hamburger menu on my site (on both desktop and mobile). I can use it to navigate the site (one page with jump-to), but it does not collapse after selection.
Running latest version of X, using a child theme. It was working fine before recent updates.

#2

Hi,

The upon checking I can confirm that the button doesn’t seem to trigger anymore.

Can you try the following and check after each step if the mobile button issue is resolved.

  1. Activate your main Xtheme

  2. Remove JS and CSS custom codes

  3. Try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

  4. Re-install xtheme

Thanks

#3

If I activate my main theme, I will lose the child customisation that gives me the hamburger navigation, likewise with the custom JS and CSS – therefore I will not be able to see the custom nav in order to test whether it is working!

I’ve deactivated all plugins and that makes no difference.

#4

Hi,

To fix this, kindly change the code in Theme Options > JS

from

jQuery(document).ready(function($){
    $('.x-btn-navbar').click(function(){
        if($(".x-nav-wrap.desktop").is(':visible')){
            $('.x-nav-wrap.desktop').css("display", "none");
        }
        else{
            $('.x-nav-wrap.mobile').css("display", "block");
                }
    });
});

to this

jQuery(document).ready(function($){
    
    $('.x-btn-navbar').click(function(){
       
    	$('.x-nav-wrap.mobile').toggleClass('in');
    });

});

Hope that helps.

1 Like
#5

This solved the problem for me!
Thanks!

#6

Thanks Paul, the nav will now close when you click on the hamburger a second time, however, it doesn’t auto collapse after selecting an item within the drop-down. Please can you advise.

#7

@ironmeni

You’re welcome! :slight_smile:

@neilandroid

Please replace code with this.


jQuery(document).ready(function($){
    
    $('.x-btn-navbar').click(function(){
       
    	$('.x-nav-wrap.mobile').toggleClass('in');
    });


     $('.x-navbar .mobile .x-nav li>a').click(function(){
       
    	$('.x-nav-wrap.mobile').removeClass('in');
    });


});
#8

Perfect – all working as it should. Thanks for your help

#9

You are most welcome. :slight_smile:

#10

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