The Problem

It can be quite frustrating if you've noticed your logo fading or becoming difficult to see when accessing Squarespace's mobile menu. This is a frequent issue that arises when your logo's color contrasts nicely with your site's header but clashes with the background of the mobile menu.

This happens because Squarespace currently applies the same logo styling site-wide. While this works fine for most areas of your site, it can cause visibility issues when the mobile menu uses a significantly different background color than your header.

Until Squarespace potentially adds a built-in solution for this, a straightforward CSS fix lets you display an alternative logo specifically for the mobile menu. This approach works whether you need it across your entire site or just on specific pages.

Let me walk you through the solution – it's more straightforward than you might expect.

The left panel shows where we want our logo to appear against the white menu background, while the right panel displays our target result - a properly visible logo that maintains brand consistency. This simple visual comparison illustrates exactly what we'll achieve with our CSS solution.

Prerequisites

Squarespace Version: 7.1

Subscription Plan: Business +

Knowledge: Basic CSS is a plus but not necessary.

Blocks & Features Used: Code Block, Code Injection.

Access the CSS Panel:

Squarespace Dashboard > Select 'Pages' > Navigate to Website Tools > Open Custom CSS

Access the Code Injection Panel of a Specific Page:

Squarespace Dashboard > Select 'Pages' > Navigate to a Page > Open the settings > Advanced > Code Injection

For more detailed information about adding custom code, please see the Squarespace Help Page.

Step 1: Prepare and Upload Your Alternative Logo

1. Upload your logo(s) in the header:

If you haven’t already, upload your primary logo in the header navigation through Design > Logo & Title in Squarespace. You can upload a single logo for desktop and mobile, or a unique one for each. Configure your preferred settings in the panel.

2. Upload the alternative logo image in your Website Assets:

If you want to use different logos on a specific page, upload it to Website > Assets. When it’s done uploading, click on the image to open it, right-click on the alternative logo image, select Copy Image Address, and save this URL for the next part. (Tip: You can use Maccy for easy clipboard management.)

For design layout consistency, make sure the alternate logo image is in the same position and size as the original.

Step 2: Insert CSS Code to Change the Logo in the Mobile Menu

Now that your logo URL is ready, let’s add the code to change the logo on the mobile menu.

For Site-Wide Logo Changes in the Mobile Menu

If you want to change the mobile menu logo across the entire site, follow these steps:

Access the Custom Code Panel.
Paste the following CSS code into the CSS panel, replacing REPLACE with the URL of your alternative logo image.

/* Changes mobile logo when menu is open */
body.header--menu-open .header-mobile-logo a,
body.header--menu-open .header-title-logo a {
  background: url(REPLACE);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

This code will apply your alternative logo site-wide when the mobile menu is open.

For Page-Specific Mobile Menu Logo Changes

If you need to change the mobile logo only on certain pages, for instance, if you’re coming from our previous tutorial on page-specific logo changes, you can use Advanced Code Injection:

Go to the target page, then Settings > Advanced > Code Injection.
Paste the CSS code below, replacing REPLACE with the URL of your alternative logo image:

<style>
/* Changes mobile logo only on this page when menu is open */
body.header--menu-open .header-mobile-logo a,
body.header--menu-open .header-title-logo a {
  background: url(REPLACE);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

This approach ensures that the alternative logo only appears in the mobile menu of the specified page.

Advanced Code: Dynamically Changing Logos for Different Themes

For those who use varying themes across their site or multiple sites (e.g., dark and light backgrounds), I offer an advanced code solution to dynamically switch logos based on the theme of each page. This can automatically apply the logo based on the theme without having to go into each individual page. If you’re interested, click here to explore it.

FAQs

Why is my logo hard to see when the mobile menu is open?

The default logo color may clash with the background color of the mobile menu. This is a common issue if the mobile menu uses a darker or lighter background than your header or other site elements. Using an alternative logo can solve this problem.

Can I change the mobile menu logo site-wide and for individual pages?

Yes! You can add CSS to the Custom CSS panel for a site-wide change or use Advanced Code Injection on a specific page to customize the logo for that page only.

What if I need to change the logo color based on the mobile menu background?

You may need to experiment with different logo colors or adjust the menu background for better contrast. Alternatively, you can use CSS to change the background color of the mobile menu.

Does this method work with all Squarespace templates?

It works with most templates, but some custom themes or heavily modified templates may require additional tweaking. Double-check your CSS selectors or consult a developer if your template behaves differently.

How do I find the URL for my alternative logo image?

Upload your logo image to Website > Assets, right-click on the image, select Copy Image Address, and use this URL in your CSS code.

Will these CSS changes impact my website's performance?

These minor CSS adjustments won't noticeably impact your site’s performance. However, always ensure your images are optimized for the web to keep your site loading quickly.

What if the logo doesn’t update or appears broken?

Double-check the image URL to ensure it’s correct. Also, clear your browser cache and try again. If the problem persists, review your CSS code for errors or consult Squarespace support.

Let’s Fix the Logo on the Mobile Menu