Mobile Menu on Desktop in Squarespace 7.1

Jan 25

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

In this tutorial we’ll make the mobile menu of your Squarespace site visible on desktop, and use a little code to customize it even further.

For some websites, a full screen mobile menu might be too much, so in the second part of this video, we’ll create code that will show the menu on half of the screen, adding some unique style to it so it really stands out against the rest of your content.

Here is the main code from the tutorial:

This code will create a full screen menu when someone clicks on the mobile menu icon on any device:

.header .header-burger{display:flex}
.header-nav, .header-actions {display:none}
.header--menu-open .header-menu { opacity: 1; visibility: visible;}

This is the second code from the tutorial:

This code will show your mobile menu on part of the screen, not the whole thing, and gives it a bit of a box shadow to stand out. Be sure to adjust the values in this code like the margin and shadow until it looks perfect for your own site!

.header .header-burger{display:flex}
.header-nav, .header-actions {display:none}
.header--menu-open .header-menu {
opacity: 1; visibility: visible;
width: 50%;
margin-left: 50%;
box-shadow: -5px 5px 15px #000}