How to swap out the header logo on one page in Squarespace
If you’re a Squarespace user, you’re probably familiar with how to upload a logo file for the main website header and (optionally) an alternate logo file for the website mobile view.
But maybe you’ve run into an issue when you realize that while the main logo looks great on most pages, it gets a little “lost” on another page - whether over a different header background image or over a colored header.
Or perhaps the logo’s color palette just doesn’t stand out as well on a few of the pages of your website?
Step-by-step guide: How to change the header logo on one page of your Squarespace website
1. Prep your logo files for use on your Squarespace website.
I recommend having multiple color versions of your logo ready to go, so that you have some options to work with on your website.
A good standard practice to follow is to have your primary logo, a lighter color version of your logo, and also a darker one. For use within the header of the website, they should all be the exact same dimensions - about 600px wide, and saved as a .png file with transparency.
2. Upload your primary logo to your Squarespace website.
Your primary logo will be the one that works best within the header for the majority of your website pages.
From your home page, navigate over to EDIT then up to EDIT SITE HEADER. From the panel that opens up, under Global Settings, click on SITE TITLE & LOGO.
Then click ADD LOGO and upload your primary logo file here. If you have a mobile-version of your logo you can also add that here, which will appear on your website only in mobile view.
Don’t forget to SAVE your page.
3. Upload your logo’s light and dark versions to the custom files area.
We’re now going to upload and work with the other two variations of your logo.
Navigate over to DESIGN -> CUSTOM CSS and then click on MANAGE CUSTOM FILES. Click on ADD IMAGES OR FONTS and upload your two logo image files here.
Once the two files are uploaded, click on each file once to insert the file’s URL into the Custom CSS window.
IMPORTANT: This step is just temporary in order to grab the URLs of your uploaded logo files. You’ll need to copy the URLs that just appeared in your CSS window and paste them somewhere for the moment. I recommend copying and pasting them into a text file for quick reference. Once you’ve copied and pasted them somewhere, you can delete them from the CSS window. BUT be sure to leave them within your Custom Files.
4. Identify the website page(s) where your primary logo doesn’t stand out well.
Next we’re going to add a bit of custom code to a single page’s header to make the magic happen. This code will replace the primary header logo ONLY on this one page.
Hover over the name of the page where you need to swap out the primary logo, and click on the cog icon to open up the page settings. Then click on ADVANCED, and you’ll see the PAGE HEADER CODE INJECTION field.
Copy and paste the following code:
<style>
.header-title-logo a {
content: url(“URL”);
}
</style>
5. Add the URL of the logo you’re going to replace the primary one with.
From your text file, copy the URL of the logo file you’ll be using (either the light or dark version).
Then highlight the letters URL in the code that you just added to the Page Header Code Injection, and hit PASTE.
So you’ve just replaced the letters URL with the actual URL of the logo file you’ve chosen.
IMPORTANT: Be sure to maintain the quotes on either side of the URL.
Click SAVE.
If you enjoyed this post, you’ll also like:
⚡️ How to use two font styles in one Squarespace heading
⚡️ 7 Useful Squarespace website plugins to check out
⚡️ How to remove the header and footer on a single Squarespace page
