How to Break to Mobile Menu Sooner on Squarespace (Without the Headaches)

One of the most frustrating things in Squarespace is that you can’t easily control when the menu breaks to mobile view. Sometimes your navigation gets squashed or overlaps, and you wish it would turn into the nice, tidy burger menu a bit sooner.

Squarespace gives you a default breakpoint, but depending on how many links or buttons you’ve got up there, it’s often not enough. Luckily, there’s a little CSS trick to force the mobile menu to appear earlier, super handy if you want more control.

Here’s what I use:

Copy Code

  /* Break to mobile menu sooner */
  @media screen and (max-width: 1140px) {
    /* Show burger icon and align it */
    .header .header-burger {
      display: flex;
      order: 2 !important;
    }

    /* Make mobile menu visible when opened */
    .header--menu-open .header-menu {
      opacity: 1;
      visibility: visible;
    }

    /* Tidy up logo alignment */
    .header-title {
      text-align: left !important;
    }

    /* Hide desktop nav and any extra buttons */
    .header .header-title-nav-wrapper .header-nav,
    .header .header-actions-action--cta {
    display: none;
    }
  }
  

This kicks in at 1140px, but you can adjust that number to whatever suits your design best.

A quick heads-up, this method hides the desktop nav and forces the burger icon to appear based on screen size, even if Squarespace wouldn’t usually switch it yet. A great little fix if you’ve longer menu items or extra buttons that crowd things on smaller screens.

That’s it, nice and straightforward, and your header stays looking clean across all devices. If you’re stuck with Squarespace or want me to tweak this for your site, feel free to book a free 30-minute chat here. I’m happy to help.