If you want to display your mobile menu on the desktop version of your Squarespace site, then you found the right tutorial! With a little bit of custom code, you’ll learn exactly how to display your mobile menu on every device, and how to add a little style to it too.

Free Squarespace Mobile Tutorials: https://insidethesquare.co/mobile'>https://insidethesquare.co/mobile

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:
.header .headerburger{
display:flex
}
.headernav, .headeractions {
display:none
}
.headermenuopen .headermenu {
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!
.header .headerburger{
display:flex
}
.headernav, .headeractions {display:none}
.headermenuopen .headermenu {
opacity: 1;
visibility: visible;
width: 50%;
marginleft: 50%;
boxshadow: 5px 5px 15px #000 }


GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE
Use my affiliate link and code PARTNER10 You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way
PARTNER10 → https://insidethesquare.co/partner10'>https://insidethesquare.co/partner10

Download over 200+ custom codes and pro tips for customizing Squarespace! Order the Squarespace CSS Cheat Sheet, available now at https://insidethesquare.co/css'>https://insidethesquare.co/css

Need some help? Visit ​https://insidethesquare.co/codehelp​ to see my current support options.

SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
WEBSITE → https://insidethesquare.co
NEWSLETTER → https://insidethesquare.co/email
INSTAGRAM →   / thinkinsidethesquare  
FACEBOOK →   / insidethesquare  
PINTEREST →   / insidethesquare  

The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥