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.
—
This is just the start of all the cool things you can do with custom CSS! Learn the basics in my free class: https://insidethesquare.co/learn
—
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 .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!
.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}
– – –
💸 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
– – –
🤩 Download over 60+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 https://insidethesquare.co/css
—
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
—
🥰 SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM → https://www.instagram.com/thinkinsidethesquare
👍 FACEBOOK → https://business.facebook.com/insidethesquare
📌 PINTEREST → https://www.pinterest.com/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 ♥
