Force Mobile Navigation in Squarespace 7.1 (2024 Update)

Apr 1

In this article, I’ll show you how you can force the mobile navigation to show all the time, even when viewing on desktop browsers in Squarespace 7.1. If you’re still using Squarespace 7.0, I have a tutorial for forcing the mobile menu on Brine templates here.

Here’s How it’s Done

Squarespace 7.1 doesn’t allow you to set the mobile breakpoint as 7.0 did. This means that you can’t define when the menu changes to the mobile hamburger style. However, we can do it with a little bit of code:

Navigate to the Custom CSS panel (Design > Custom CSS) and paste the following code:

@media screen and (max-width: 5000px) {
  /* Display burger icon at all widths and align right */  
  .header .header-burger {
    display: flex;
    order: 2 !important;
  }
  /* Make burger menu visible at all widths */  
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
  }
  /* Center logo in mobile device */
  .header-title {
    text-align: left !important;
  }
  /* Hide primary navigation menu */ 
  .header .header-title-nav-wrapper .header-nav {
    display: none;
  }
}

Modify the menu font size

If you’re looking to modify the menu font size from the default, add the following code:

.header-menu-nav-item {
  line-height: 3em
}
@media screen and (min-width: 768px) {
  .header-menu-nav-item a {
    font-size: 10vmin;
  }
}

If you’re looking to hide the social icons and CTA button from the header, add the following code:

.header-nav, .header-actions {
  display: none;
}

It’s as easy as that.
You can modify the values to fit your own style. Let me see what you’ve done with this by pasting your own website in the comments to show me what you did with it.