The menu panel doesn't go away in Mobile mode

Site URL: https://www.villanocoaching.com/

I designed a one-page website, the page will scroll down when you click the selected item in the top of the menu bar in desktop mode.
The Problem is that in mobile mode the menu panel doesn't go away due to the one-page design which won't reload the page. I did notice that the menu links while still scroll down to the desired content but the menu stays on screen. I would like the menu to disappear after the link has been selected. 

This is the code that I'm using:

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
 <script type="text/javascript">
      $(function() {
        $('a[href*=#]:not([href=#])').click(function() {
          if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
              $('html,body').animate({
                scrollTop: target.offset().top
              }, 1000);
              return false;
            }
          }
        });
      });
    </script>

This code lives in the header under Settings>Advance>Code Injection. TIA.

I see fine here. Did you solve the problem? Can you share the solution for other members? Thank you.

I used the same code with the same problems. I switched to this code:

<script>
    $('a').click(function (e) {
      $('html, body').animate({
            scrollTop: $($(this).attr('href')).offset().top
        }, 1000);
    });
</script>

and tagged my anchors like this <section id="#nameofsection"></section>.

at first I used anchor tags <a name="#anchorname></a>, but the scrolling did not work in safari until I used section id.