Collapse/hide Mobile Nav Menu After Nav Link Click

I have got an ajax page load working on my wordpress site with both the official twenty sixteen and storefront themes. The only hitch is that the mobile nav menu does not close onc

Solution 1:

try this

$(function () { 
   $('#menu-main li>a').on('click', function (e) {
       $( "#menu-toggle" ).click();
   });
});

or

$(function () { 
   $('#menu-main li>a').on('click', function (e) {

       // i set  $(".toggled-on") because i dunno which is your main menu //<div class="menu-main-container">// or //<ul id="menu-main" class="primary-menu">

       $(".toggled-on").attr("aria-expanded","false");
       $(".toggled-on").removeClass(".toggled-on");
   });
});

Solution 2:

Hope this is solves your problem,thanks

$("#menu-toggle").click(function(e){  /*for click on menu*/
  $('.menu-main-container').toggle()
})
$('.menu-item').click(function(e){    /*for click on link*/
     $("#menu-toggle").trigger('click')
       
 })

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><buttonid="menu-toggle"class="menu-toggle toggled-on"aria-expanded="true"aria-controls="site-navigation social-navigation">Menu</button><divclass="menu-main-container"><ulid="menu-main"class="primary-menu"><liid="menu-item-292"class="menu-item menu-item-type-post_type menu-item- 
object-page menu-item-292"><ahref="https://example.com/my-account/">My 
 account</a></li><liid="menu-item-293"class="menu-item menu-item-type-post_type menu-item- 
object-page menu-item-293"><ahref="https://example.com/labels/">Labels</a></li></ul></div>