Jump to content

The menu panel doesn't go away in Mobile mode

Recommended Posts

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) {
                scrollTop: target.offset().top
              }, 1000);
              return false;

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

Link to comment
  • 1 year later...

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

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

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. 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.