In this blog post, we'll explore five creative ways to get the most out of customizing your Squarespace mobile menu.

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 won’t 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!

Change the menu icon

STARTS AT 00:52

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. 

STARTS AT 01:52

Use your own image to replace the menu icon, follow these steps:

1. Click on Design → Custom CSS and paste the code here.

2. Click on Manage Custom Files under the CSS panel and upload your image.

3. Replace the text your-url-here in the code below with the image URL.

4. For a more detailed step-by-step, check out this video on how to upload an image to Squarespace.

.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;
}

Change link spacing

STARTS AT 02:58

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.

Change alignment & spacing with code

STARTS AT 03:46

1. Click on Design → Custom CSS and paste the code below.

2. 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
}

Use An Image For The Background

STARTS AT 04:59

1. Click on Design → Custom CSS and paste the code here.

2. Click on Manage Custom Files under the CSS panel and upload your image.

3. Replace the text your-url-here with the image url. For a more detailed step-by-step, check out this video on how to upload an image to Squarespace.

.header-menu .header-menu-bg{
  background-image: url(your-url-here);
  background-size: cover;
}

Change Your Menu Size

STARTS AT 06:06

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}