Force the mobile menu on desktop and tablet for squarespace 7.1

So your building a beautiful site on squarespace! But you would like that simplistic and stylish navigation look by only showing a forcing the mobile hamburger menu to appear on desktop and tablet screen sizes, I get it. Here’s a very quick and simple piece of CSS code to do just that! We will simply remove the full navigation menu all together on squarespace 7.1 Then add the below code to your custom css. Go to > Design > Custom CSS and paste the code. Don’t forget to hit save!

---

CSS code for 7.1

 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

---

I hope you found this CSS guide for forcing the mobile menu on desktop screens useful. You might also be interested in my article on ‘adding text to the Squarespace hamburger menu’ check it out!

Feel free to sign up to my newsletter for more Squarespace hints & tips!

Did I help you? Consider buying me a coffee as thanks!