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: [ Ссылка ]
.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: [ Ссылка ]
.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! ☕ [ Ссылка ]
⭐ NEW: List of my top 7 FREE Squarespace tutorials: [ Ссылка ]
📑 Download my collection of CSS codes for Squarespace at [ Ссылка ]
🙋 Need some help? Visit ​[ Ссылка ] to see my current support options.
- - -
💻 WEBSITE → [ Ссылка ]
📧 NEWSLETTER → [ Ссылка ]
🤳 INSTAGRAM → [ Ссылка ]
👍 FACEBOOK → [ Ссылка ]
📌 PINTEREST → [ Ссылка ]
- - -
💸 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 → [ Ссылка ]
- - -
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 ♥

свернуть