Use a Different Logo in the Mobile Open Menu in Squarespace

How to Use a Different Logo in the Mobile Open Menu in Squarespace

In this tutorial, I'm going to show you how to use a different logo in the mobile open menu of your Squarespace website using a little bit of custom CSS.

But let me remind you that although it's fun to play around with the design of your Squarespace website, it's your website's job to attract and engage your target audience.

To learn more about how to do that, check out my website strategy blog posts where I share lots of tips and strategies for how to attract and engage your target audience to your Squarespace website.

Watch me swap out the logo for the mobile open menu in Squarespace ↓ or scroll down for a step-by-step tutorial.

How to Swap Out the Logo for Your Mobile Open Menu

To swap out your logo for the logo that you want to appear in the navigation open menu of your Squarespace website, you're going to add a little bit of Custom CSS. You're

Here’s how you do it:

1. Go to Pages > Website tools > Custom CSS

2. Copy and paste the code snippet below (scroll down) right here

3. Upload your logo by selecting ‘Custom Files’ and simply upload your logo

4. Now highlight the area in your code snippet where it says ‘IMAGE URL GOES HERE’ and delete it

5. You can see the cursor is blinking between these two parentheses and it gives you an option to upload one of your custom files

6. Simply locate the correct file and select it

7. Hit save

The functionality of this logo works as well. When you select it, it's going to bring your visitor to the homepage of your website.

It’s like magic!

Mobile Logo

Mobile Open Menu Logo

Here’s the Code Snippet

/*Use a different logo in open mobile menu*/

.header--menu-open header#header img{
	content: url(IMAGE URL GOES HERE) !important;
}

Was this helpful?

Are you going to use this on the website you’re working on? Was this on your radar or are you thinking you’ll use it now that you know you can? Share your thoughts in the comments 👇

---

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

• Move Navigation Button Up on the Mobile Menu in Squarespace

• Display Gallery Grid Block 3 Across on Mobile in Squarespace

• How to Hide the Hamburger Menu on Mobile in Squarespace

• How to Hide Blocks and Sections on Mobile in Squarespace

This page contains affiliate links

My Insta

@jenxwebdesign