How to Add an Image to the Mobile Menu Background in Squarespace

Want to make your Squarespace mobile menu pop?

Follow these super easy instructions for adding an image to the mobile menu background in Squarespace.

Start in Canva

Before I jump in, let me remind you that it’s your website’s job to attract and engage your target audience, and no amount of cool website design will accomplish that, so check out my blog posts about website strategy before you go.

Head on over to Canva

1. Log into Canva and select Create a Design > Custom > 360px by 640px > Create New Design

2. Upload your image or choose an image from the Canva library and stretch it to fill the canvas

3. Add an overlay by adding the square ‘shape,’ stretching it and placing it on top of your image

4. Choose one of your brand colors for this or a Canva suggested color that’s been identified in the photo

5. Select ‘Transparency’ and reduce it by dragging the selector until you get it how you like it—you want to be able to see both the image and the navigation text on the background so you’ll have to use your judgment

6. Download the image to your computer

Head on Over to Squarespace

1. Select pages > Website tools > Custom CSS

2. Select ‘Custom Files’ and upload your image

3. Copy and paste the code below (scroll down) in the CSS window

4. Highlight where it says ‘IMAGE URL GOES HERE’ and delete it

5. You’ll see the cursor blinking in between the two parentheses

6. A menu pops up here where you can choose a custom file

7. Select the image file you just uploaded

8. Voila! Hit save and you’re done!

Code Snippet:

/*Add background image to mobile menu*/

.header-menu .header-menu-bg{
background-image: url(IMAGE URL GOES HERE);
background-size: cover;
}

Customize in Site Styles

You can change the link color and the button background and button text in site styles under ‘Menu overlay.’

A quick way to find this section of the site styles menu would be to select ‘Command F’ on your keyboard and just type in ‘Menu overlay’ and it takes you right to it.

Was this helpful?

Are you going to try this? Share your thoughts in the comments. 👇

---

If you liked this post, you’ll LOVE these:​​

• How to Make a Summary Block Auto-Scroll in Squarespace

• How to Easily Add a Text Shadow Effect in Squarespace

• How to Hide the Hamburger Menu on Mobile in Squarespace

• How to Add a Second Button to Navigation in Squarespace

This page contains affiliate links

My Insta

@jenxwebdesign

Like this post?

Pin It to Pinterest 👇