QAlaunch

Squarespace mobile menu not working or burger not opening

A Squarespace mobile menu that will not open is nearly always caused by custom code: CSS that puts another element over the burger icon, a sticky-header tweak, or a script in Code Injection that breaks the menu. Back up your Custom CSS and Code Injection, remove them temporarily, and test again on a phone. If the menu works without them, restore the code piece by piece; a z-index rule inside a max-width: 767px media query often fixes a covered burger.

Opens your site in a real browser on desktop and phone. Free, about two minutes, no signup. Full report from $19.

What you'll see

On a phone the burger icon in the header does nothing when tapped, needs three or four taps before it reacts, or opens a menu that runs off the bottom of the screen with no way to scroll. Sometimes it only fails on the homepage or one other page, and works everywhere else. Anchor links in the mobile menu may scroll the page but leave the menu open on top.

Why it happens

1. Custom CSS or code covers or breaks the burger

Rules for sticky headers, announcement bars or layered sections can place an invisible element over the burger, so taps land on that element instead. A script added through Code Injection can also throw an error that stops the menu from responding.

2. Code on one page only

Each page has its own header code injection in its settings. A script or style added there for a banner or embed affects only that page, which is why the menu can fail on the homepage and work elsewhere.

3. Too many items for the screen

A long navigation with several folders can make the open menu taller than a small phone, and the lower links can end up unreachable.

4. Anchor links do not close the menu

Links to sections on the same page scroll the content underneath, but the open mobile menu can stay in place over it, which looks like the menu is stuck.

How to fix it

  1. Copy your Custom CSS and Code Injection into a text file as a backup. Both live under Website Tools in the current editor; on older menus they are under Design > Custom CSS and Settings > Advanced > Code Injection.
  2. Remove the custom code temporarily and test the live site on a phone. If the burger now opens reliably, the cause is in that code.
  3. Open the settings of the page where the menu fails and look under Advanced for page header code injection. Remove anything there and retest that page.
  4. Restore your code in sections, testing after each, until the menu breaks again. That last block is your culprit.
  5. If an element is sitting over the burger, give the header’s burger a higher z-index in Custom CSS inside a @media (max-width: 767px) block, since 767px is where Squarespace 7.1 switches to the mobile layout.
  6. If the menu is too tall, reduce top-level items or merge folders, so the whole menu fits on a small phone.
  7. Test in both Safari on an iPhone and Chrome on Android, on the homepage and at least one inner page.

How to check it's fixed

  • Below 767px on the live site, tap the burger once: the menu should open on the first tap and close on the first tap of the close icon.
  • Tap every link in the mobile menu, including anchor links and folder items, and confirm each navigates and the menu gets out of the way.
  • Repeat on each page that had the problem, not just the homepage.

What a QAlaunch scan shows for this

  • Overlapping or hidden elements at phone width, such as something covering the header, from the 390px screenshot and visual review.
  • Menus that do not fit the screen and tap targets that are too cramped.
  • JavaScript errors from scripts added through Code Injection.
  • The free scan checks the homepage; a menu that fails only on other pages needs those pages in a paid report.

See exactly what a full report contains in the sample report.

Frequently asked questions

Why does the menu work in the editor but not on my phone?

The editor’s mobile preview is not a real touch device, and some custom code behaves differently inside the editor. Always test the published site on an actual phone.

Can I change the width where Squarespace switches to the mobile menu?

Not in Squarespace 7.1; the mobile layout starts at 767px. Write your custom CSS media queries to match that width so your styles and the built-in switch agree.

Will removing custom code break my design?

Temporarily, yes. That is why the backup matters. You are only removing it to find the faulty part, and you can paste the rest back as soon as you know which rule is responsible.

Done for you · not automated

Rather have a QA engineer test it by hand?

If this is a site you're launching or handing to a client, I'll go through it by hand, including the Squarespace-specific issues a scan can't reach, like logged-in flows.

$299one-time · 3 business days
  • Up to 10 key pages tested by hand, not a scan
  • Every flow a customer uses: forms, sign-up, checkout, booking
  • Real mobile and desktop browsers
  • A written report in plain language, with screenshots
  • A 15-minute call to walk you through it
  • 10 years of professional QA experience

Tell me about your site and I'll reply personally, usually the same day.

No payment now. I'll confirm scope and price first.

Related fixes

More for Squarespace: all Squarespace fixes

Written by Waqas Ahmad, QA engineer with 10 years of professional testing experience. Last checked October 26, 2026.

Sources: Squarespace Forum: hamburger menu not working on homepage in mobile Chrome · Squarespace Forum: hamburger menu on mobile not clickable · Squarespace Forum: hamburger menu on mobile not working