5 Squarespace Mobile Menu Design Hacks

In this video, you’ll learn five easy ways to customize your mobile menu and give your Squarespace site a unique touch. First, I’ll show you how to change the mobile menu icon, giving you the ability to swap out the standard three-line icon for something more eye-catching. Then, you’ll learn how to adjust link space and alignment using the editor and custom CSS. After that, I’ll teach you how to use an image for the background of your mobile menu. And last but not least, you’ll learn how to change the size of the menu so it wont take up the whole screen. We are covering a LOT in this tutorial, so use the time stamps below if you want to jump ahead: 00:52 - Change the menu icon To use the built-in options, start in Edit mode, click on Edit Site Header, then the mobile icon, then select the icon you want and change the thickness. 01:48 - Use your own image to replace the menu icon Use this code below and repalce your-url-here with your image url. Click on Design → Custom CSS and paste the code here. Click on Manage Custom Files under the CSS panel and upload your image. Replace the text your-url-here with the image url. For a more detailed step-by-step, check out this video: https://youtu.be/Ns1x8rJf8sw .burger { background-image: url('your-url-here'); background-size: contain; background-repeat: no-repeat; background-position: right; background-color: transparent !important; } .burger-inner { display: none; } 02:58 - Change link spacing To use the built-in options, start in Edit mode, click on Edit Site Header, then the mobile icon, then select overlay menu and pick your spacing and alignment options. 03:46 - Change alignment & spacing with code Click on Design → Custom CSS and paste the code here. Use flex-start to keep your links at the top, or flex-end to keep them at the bottom. You can also use space-around, space-between or space-evenly. .header-menu-nav-folder-content{ justify-content:flex-start!important } 04:59 - Add a custom background To add a custom background, you can use a background image. Click on Design → Custom CSS and paste the code here. Click on Manage Custom Files under the CSS panel and upload your image. Replace the text your-url-here with the image url. For a more detailed step-by-step, check out this video: https://youtu.be/QhW5ourliWY .header-menu .header-menu-bg{ background-image: url(your-url-here); background-size: cover; } 06:06 - Change menu size To change the size of your menu, add this code to your site and adjust the top, left, right, and bottom values. You can also add a border radius, box shadow, and make the page slightly transparent. .header--menu-open .header-menu { bottom:10vh!important; left:5vw; right:5vw; top:5vh } .header--menu-open .header{ top:5vh; left:5vw } /* this curves the corners and adds a shadow */ .header--menu-open .header-menu-bg{ border-radius:15px!important; box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.5) } /* this makes a page slightly transparent */ .header--menu-open #page {opacity:.3!important} - - - ❤️ Like this tutorial? Buy me a coffee to say thanks! ☕ https://buymeacoffee.com/insidethesquare ⭐ NEW: List of my top 7 FREE Squarespace tutorials: https://insidethesquare.co/top7 📑 Download my collection of CSS codes for Squarespace at https://insidethesquare.co/css 🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options. - - - 💻 WEBSITE → https://insidethesquare.co 📧 NEWSLETTER → https://insidethesquare.co/email 🤳 INSTAGRAM → https://www.instagram.com/thinkinsidethesquare 👍 FACEBOOK → https://facebook.com/insidethesquare 📌 PINTEREST → https://www.pinterest.com/insidethesquare - - - 💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code INSIDE10 - 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/inside10 - - - 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 ♥