Jump to content

Problem with mobile navigation and anchor links in 7.1

Recommended Posts

I have a little bit of an odd problem with anchor links and mobile navigation in the new 7.1 template.

I'm creating a single page website for a client (unfortunately I cannot yet share the website) and have created anchor links in the main navigation so users can quickly scroll to sections of the page. I've done this by setting the links as "#AboutUs" for example, and creating an empty div with the id "AboutUs" where I want the page to scroll to.

In the desktop layout this works as intended, but on mobile when a navigation link is clicked the full-screen navigation menu remains open. The user is then completely unaware that the link has worked as it looks like nothing has happened, when in fact behind the full-screen navigation menu the page actually has scrolled to the correct point on the page.

I've tested this in a live 7.0 site and it works as intended (open mobile navigation > click on anchor link > mobile navigation closes and page scrolls to the relevant id) but not in 7.1.

I've also noticed that the page no longer smoothly scrolls when clicking an anchor link like it did before, but this is a minor issue compared to the above, so it doesn't bother me too much.

TL;DR In 7.1, is there a way to force the mobile navigation menu to close when an anchor link is clicked?

Link to comment
  • Replies 6
  • Created
  • Last Reply

Glad to see I'm not the only one who's noticed this, and that you've passed it on to support.

I'm hoping it'll get fixed soon, or at the very least a solution will be provided that we can implement ourselves, as my client won't be too happy with the current inelegant solution I have in place. For now I've made the mobile nav menu's background semi-transparent, so the user actually sees the page has scrolled as intended, but then they have to manually close the menu. That's 3 clicks to simply get to the desired spot on the page, and frankly it feels wrong and broken.

I guess 7.1 wasn't tested for single page website designs, on mobile at least.

Link to comment


We ended up going back to 7 for the dev site we're working on and hiding the menu on mobile. It's the advantage of working from scratch. We also realized that 7.1 doesn't support image galleries yet. Surprising considering the number of artists that choose SS to display their work.

Support suggested using the menu link in this format: /page-slug#section (example: /home#about). We didn't want to use this option as it reloads the page each time you select something from the menu - bad practice for mobile in my opinion and defeats the purpose of a one page website. We're hoping SS resolves this issue asap.

Link to comment


Thanks for the update and extra info. Really appreciated.

I had already tried out the link format as support had suggested to you, but as you pointed out it kind of defeats the point of a single page website, and it feels a "wrong" from a user perspective. Such a shame that's all Squarespace can suggest.

Really interesting to hear about the lack of image galleries too. As a graphic designer/illustrator I use SS for my own portfolio site, but I had been considering moving over to 7.1 for my own website and using it as an opportunity to get more familiar with the new template and functionality. Looks like it's not quite there yet, and I won't be making the jump to 7.1 any time soon.

7.1 is also incredibly slow and I continuously get warning messages in Safari that the site is consuming a lot of energy or memory, or both. It really does feel like a product that's still in a testing stage and not yet feature complete, so I'm surprised they're encouraging everyone to use this new version. 

It's safe to say I regret going with 7.1 for my client's super simple single page website...

Link to comment
  • 1 month later...


This topic is now archived and is closed to further replies.

This topic is now closed to further replies.
  • 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.