Mobile Menu Closing On Click.

I've been using stackoverflow many times in the past to solve my coding problems, but this time I couldn't find the right answer, so I signed up and decided to ask the question mys

Solution 1:

In the theme.js file, on line 260 there is code that looks like this

jQuery('.home #site-navigation li a[href*=#]').on('click', function(event){
    event.preventDefault();
    smoothScroll(jQuery(this.hash));
});

In order to close the menu, you need to add some lines to toggle some CSS classes on various items that apparently control the visibility of the menu. It should look like this afterward

jQuery('.home #site-navigation li a[href*=#]').on('click', function(event){
    event.preventDefault();
    smoothScroll(jQuery(this.hash));
    jQuery('#nav-toggle').toggleClass('nav-is-visible');
    jQuery('.main-navigation .onepress-menu').toggleClass("onepress-menu-mobile");
    jQuery('.header-widget').toggleClass("header-widget-mobile");
});

I got the extra lines to add from the events that occur when you manually close the menu via the X icon, which can be found in theme.js on lines 7, 8 and 9.

Solution 2:

I see your theme is using jquery. You can add something like this to the footer.php file:

<script>
  $(".onepress-menu li a").on("click", function() {
    $(".onepress-menu").toggleClass("onepress-menu-mobile");
  });
</script>

You can see the effect emulated here:

jsfiddle