Displaying an Alternate Logo Over Banner Images in Squarespace

In this Squarespace tutorial I show you how to displaying an alternate logo over banner images.

This is an important trick that can be used to ensure that your logo is always visible no matter if your pages are light or dark.

How to show a different Logo Over Banner Images

Custom Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(function(){
$('.Header--overlay:has(.Header-branding)').find('img').attr('src', 'your-image-link-here')})
</script>

Don’t Want to Watch the Video? Read the Post!

What's up! Chris Schwartz-Edmisten here from schwartz-edmisten.com. Today I am going to be showing you how to serve a different logo image when the logo is overlaid on a banner image. 

Why Would I Need to do this?

One of my clients wanted the site navigation and logo to overlay banner images, but the problem is that her logo is dark, and it wasn’t designed to be shown on a light background.

You can see below on the destinations page that it looks really great on a white background, it really pops. 

But when you go to an overlay - when the logo is overlaying a banner image like on the gallery page, you can hardly even see it because it's a dark logo on a dark background.

So I came up with a way to solve this.

I wrote a little jQuery that can actually display a different logo image (that we upload) on Banner overlay pages.

Step 1: Copy and Paste the Code from this Blog Post

The first thing that we have to do to get started is to copy the code from the blog post and paste it into notepad, sticky notes or anywhere that you can access it later. Once you past it in just keep it to the side for now. we're going to use the code a little bit later.

 
Alternate logo Squarespace Tutorial - Copying and pasting the code into notepad.jpg
 

Step 2: Upload the Alternate Logo Image

The next step is to go back into Squarespace and click Design, then click Advanced and navigate to the custom CSS panel.

We're going to upload our second logo image using the manage custom files uploader.

Click the cursor on an empty line in the CSS panel because this is where the URL to the image is going to appear.

Click manage custom files and upload an image.

For my project, I have this white version of the same logo that will look good against dark backgrounds.

When it uploads, click on it in the custom files manager and the link will appear where you clicked before in the custom CSS panel.

Now cut the URL because we don't need it in our custom CSS, using control X on Windows or command X if you're on a Mac.

The next thing that we want to do is go back to the notepad code, and where it says “your-image-link-here” paste in your image URL (keeping the quotation marks!).

Step 3: Paste the code into the Footer Injection Code Area

Now copy all of that code and inject it into the footer injection code.

To do so, click on Settings, then Advanced, then Code Injection and past it into the Footer Code window.

When you hit save, the logo image now changes on overlay pages. And when you go to pages that don't overlay, the dark logo image is shown.

This is a really cool way to display an alternate logo image with just a tiny piece of code!

Hopefully this helps you guys out!

If you have any questions or need help implementing this on your site, please feel free to shoot me an email or leave me a comment on YouTube.

Cheers!
Chris