How to Restyle the Squarespace Mobile Menu (Without Breaking It)

Override Squarespace’s native mobile menu by targeting .header-menu-nav and its child elements with higher-specificity CSS rules injected into the Custom CSS panel.

The Problem

The default Squarespace 7.1 mobile menu is functional but generic. Agencies often need to match it to a client’s brand colors, increase tap targets, or remove the default animation. Because the menu is rendered by Squarespace’s core JavaScript, you cannot replace the markup — but you can override the styles.

Finding the Right Selectors

Open your site on a mobile viewport (or resize your browser below 768px), open the menu, and use DevTools to inspect these elements:

• .header-menu-nav — the full-screen overlay container
• .header-menu-nav-item — individual link wrappers
• .header-menu-nav-item a — the actual anchor tags

CSS Overrides

Add this to Custom CSS:

@media screen and (max-width: 768px) {
  .header-menu-nav {
    background-color: #0f172a !important;
  }

  .header-menu-nav-item a {
    color: #ffffff !important;
    font-size: 1.5rem !important;
    font-weight: 500;
    padding: 1rem 0 !important;
  }

  .header-menu-nav-item a:hover {
    color: #38bdf8 !important;
  }

  .header-menu-nav-folder-content {
    background-color: transparent !important;
  }
}

Testing on Real Devices

Browser DevTools are a starting point, not the finish line. Always test on:

• iOS Safari (the most restrictive mobile engine)
• Chrome on Android
• A real Squarespace mobile preview link

Pay special attention to tap target sizes. Links smaller than 48×48px fail WCAG accessibility guidelines and frustrate users.