Menu not collapsing after clicking an item in mobile screens

Hi

www.gobag.in

I have a menu with items, “About Us” and “Contact Us”, referring to sections in the same static front page. When I click on those items, I expect the menu to collapse and the screen scrolls to corresponding section. But I observed the menu remains expanded. This is happening in smaller screens where menu is collapsed by default and menu icon is shown.

How can I make menu collapse on click on those two menu items?

Thanks
Rajesh

Hi,

That’s not possible I’m afraid. We’ll try to see if we can come up with a solution to implement in a future version but I doubt we can have something that works without affecting other types of menu links.

Dear Rajesh,

Currently we don’t have an option to enable it in the customizer panel. As the solution, we should add a couple of custom jQuery code. Could you please try the following?

  1. Install and activate the Header and Footer Scripts plugin
  2. Go to Settings > Header and Footer Scripts panel
  3. Paste the following code into the “Scripts in footer:”
<script>
(function($){
     
    "use strict";
    
    $(window).load(function () {
    
        var $mobileMenu = $('.mobile-nav ul a');  

        $mobileMenu.click(function(){
        
          $('.slicknav_btn').addClass('slicknav_open').removeClass('slicknav_collapsed');
          
          $('.slicknav_nav').addClass('slicknav_hidden').attr('aria-hidden', 'true');
          
          $('.slicknav_nav').slideUp();
        
        });

    
    });
    

})(jQuery);
</script>       
  1. Save settings

Let me know how it goes. I’ll wait to hear back from you regarding your stats.