How to show mobile menu on desktop in Squarespace 7.1
One of the biggest things missing from Squarespace 7.1 is the mobile breakpoint option. Back in the days of version 7, it was easy to show your mobile menu on desktop - just by dragging the breakpoint slider.
In 7.1, though, with that slider gone, so is the option to easily achieve this.
Luckily it can be done with a little bit of code.
So first you’re going to need to head to your CSS Editor in Squarespace (Design > Custom CSS)
Then take a copy of this CSS 👇
.header-nav {
display: none;
}
.header-actions {
display: none;
}
.header-burger {
display: flex;
}
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}Then paste it into the CSS editor and hit ‘Save’.
And that’s it!
Hi Carl!
Thanks for the great tutorial! I’m trying to hide specific navigation items on my Squarespace site for multilingual propos3s, https://www.matizgallery.com/ and I’ve successfully managed to do it on the desktop version with this code:
html
Copy code
<style>
#header .header-nav-item:nth-child(9) { display: none; }
#header .header-nav-item:nth-child(10) { display: none; }
#header .header-nav-item:nth-child(11) { display: none; }
#header .header-nav-item:nth-child(12) { display: none; }
#header .header-nav-item:nth-child(13) { display: none; }
</style>
However, this doesn’t work for the mobile version of the site. I’ve tried inspecting the mobile navigation structure and using different classes (like .header-menu-nav-folder), but it’s still not working.
Do you have any advice on how to properly target and hide these navigation items specifically for mobile? I’d really appreciate any guidance!
Hi Carl, is there any way I can make the menu on the right side of the screen only, without the logo overlapping the menu?