How to Change the Logo on Different Pages in Squarespace

Contents

CONTENTS

x CLOSE

Intro

In Squarespace, by default, you're limited to a single logo across all pages on both desktop and mobile views. This can be a design limitation, especially if you use varied themes across your site. For instance, a dark logo may disappear on a dark background page, creating inconsistency in your brand’s appearance.

This tutorial will guide you through a straightforward CSS solution for changing your logo on specific pages in Squarespace. This is specifically for logo images (not text-based site titles).

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 Code Injection Panel of a Specific Page:

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

Access the CSS Panel:

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

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:

Begin by uploading 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: Code Injection for Page-Specific Logo Changes

Now that your logo URLs are ready, let’s add the code to change the logo on a specific page. This will require a small amount of CSS, which you’ll paste into Advanced Code Injection for the target page.

For the Same Logo on Desktop and Mobile

If your logo is identical for both desktop and mobile, use the following CSS:

1. Go to the page where you want the alternative logo to appear.

2. Click Settings > Advanced > Code Injection.

3. Add the following code, replacing REPLACEURL with your alternative logo URL.

<style>
  /* Hides original logo image on the selected page */
  .header-title-logo a img {
    opacity: 0 !important;
  }
  
  /* Applies alternative logo */
  .header-title-logo a {
    background: url(REPLACEURL);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: background 0.3s ease; 
  }
</style>

This code effectively hides the default logo image and displays the alternative logo instead. The sizing will be the same as the settings you configure in the header logo and title panel.

For Unique Desktop and Mobile Logos

If you’ve set a unique logo for mobile and want to adjust it as well, follow these steps:

1. Add the following code directly below the previous one in Advanced Code Injection, replacing REPLACE with the alternative URL for the mobile logo.

<style>
  /* Hides original mobile logo image */
  .header-mobile-logo a img {
    opacity: 0 !important;
  }
  
  /* Applies alternative mobile logo */
  .header-mobile-logo a {
    background: url(REPLACE);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: background 0.3s ease;
  }
</style>

Important: If your mobile menu background color differs from the logo you set up in this tutorial, check out my guide on adjusting logos for mobile menu backgrounds.

Troubleshooting Common Issues

Mobile Logo Visibility

If your mobile menu background obscures the logo, you may need additional CSS to create contrast. My separate guide on changing the logo image when the mobile menu is open provides a solution for this.

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

Can I change the logo for just one page in Squarespace?

Yes! Although Squarespace only allows one logo by default, you can use custom CSS to display a different logo on specific pages. This tutorial explains how to implement this with ease.

Will these code changes affect my logo across the whole site?

No, the code is applied only to the page(s) where you add it in Advanced Code Injection. Other pages will continue to display the default logo you uploaded.

What if I want different logos for desktop and mobile on the same page?

Squarespace allows for unique logos on desktop and mobile. If you’ve set this up, use the additional code provided in the tutorial to change both logos on your target page.

Is there a way to automatically change logos based on a page’s background theme?

Yes! I offer an advanced solution to dynamically switch logos based on the theme (e.g., dark or light background). Check out the Advanced Code section for more information on implementing this feature.

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

Upload the alternative logo image via Website > Assets. Right-click on the image, select Copy Image Address, and save this URL to use in your CSS code. I recommend using a clipboard tool like Maccy for quick access.

Why is my logo not showing correctly on mobile when the menu is open?

If the mobile menu background color interferes with your logo, you may need extra CSS to ensure visibility. Check out my article on changing the logo image on mobile menus for more details.