title: How to close mobile menu by clicking outside the menu
body: <p>My site is based on WP theme and the main menu on the site is hamburger menu.
  The width of the menu is circa 1/4 of the screen width (on desktop)</p>
  <p>I'd like to click anywhere in the reminding 3/4 of the screen and this click should collapse the menu. It currently only closes when I select the &quot;X&quot; button.</p>
  <p>see the website here:
  <a href="https://joos.app/" rel="nofollow noreferrer">https://joos.app/</a></p>
  <p>And here's the relevant JS code to get this moving. I could use your advice on what to add to / amend in this code to make it happen</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  /* Navigation Events */
  
    jQuery('.nav-butter.hidden_menu, .nav-butter.visible_menu').on('click', function () {
      if (jQuery(this).hasClass('active')) {
        jQuery(this).removeClass('active').parents('.site-header').find('.navigation').removeClass('active');
      } else {
        jQuery(this).addClass('active').parents('.site-header').find('.navigation').addClass('active');
      }
    });
    
    jQuery('.nav-butter.side_menu').on('click', function () {
      if (jQuery(this).hasClass('active')) {
        jQuery(this).removeClass('active');
        jQuery('.site-header-side-nav').removeClass('active');
      } else {
        jQuery(this).addClass('active');
        jQuery('.site-header-side-nav').addClass('active');
      }
    });
  
    jQuery('[href="#"]').on('click', function(e) {
      e.preventDefault();
    });
    
    jQuery('.side-navigation a').on('click', function (e) {
      var $el = jQuery(this),
        $parent = $el.parent();
  
      if ($parent.hasClass('menu-item-has-children') &amp;&amp; !$parent.hasClass('active')) {
        e.preventDefault();
  
        $parent.addClass('hide active').siblings().addClass('hide');
        $el.parents('.sub-menu').addClass('opened');
      }
    });
    
    jQuery('.side-navigation .sub-menu &gt; .back').on('click', function () {
      var $el = jQuery(this);
  
      $el.parent().parent().removeClass('hide active').siblings().removeClass('hide');
      $el.parent().parent().removeClass('opened').parent().removeClass('opened');
    });
    
    jQuery('.side-navigation').find('.sub-menu').prepend('&lt;li class="back free-basic-ui-elements-left-arrow"&gt;&lt;/li&gt;');</code></pre>
  </div>
  </div>
  </p>
  <p>Thanks in advance, and please ignore the rest fo the little bugs, site still in build process.</p>