How to create a full screen menu on all devices

Nov 3

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 that will create a full screen menu when someone clicks on the mobile menu icon on any device:

/* code from insidethesquare.co */
.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 that 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!

/* code from insidethesquare.co */
.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 
}