Change the logo on one page in Squarespace // Alternative logo for a single page on Squarespace

[@mikedunlapdesign]

Thanks! Also good to add "background-repeat:no-repeat;" after the image tag.

[@InsideTheSquare]

Great tip - thank you for sharing! ☺️

[@TorreyJay1820]

Your channel is PURE GOLD! big fan! Quick question - when I followed these instructions my logo was the right color however it now looks like it has been sliced and a tiny sliver has been repeated directly below the logo. Any advice would be SO appreciated.

[@InsideTheSquare]

Thank you - I'm glad you like my work! Try adding this to your code, before the final curly bracket: background-repeat: no-repeat

[@michellesourisseau901]

Hallelujah! Thank you.

[@InsideTheSquare]

You're welcome!

[@mackenziewade3332]

Thank you for this! Is there a way to make the link when clicking the logo navigate to a page other than the home page?

[@InsideTheSquare]

That's a great question! I have never done that before, but I found this post in the forum that might help: forum.squarespace.com/topic/35992-changing-the-link-address-of-my-logo/

[@monsieurm2904]

You have win a new subscriber !

[@InsideTheSquare]

Yay! Thank you & welcome aboard!

[@dolphinswimmer99]

Ditto!

[@jwo685]

Thanks for the tips! I followed your steps but couldn't get the logo to center align on the page, any thoughts on how to achieve this?

[@InsideTheSquare]

Great question! Setting the margin to auto should make it centered on desktop; mobile is a little trickier with the menu. Start with this: margin:auto!important and then add any other margin-left or margin-right adjustments to move it a bit if needed, like this: margin: auto!important; margin-left: -5px!important;

[@jwo685]

@@InsideTheSquare Thank you! I am still trying to figure it out but thanks for your help anyway.

[@monicacook7306]

Is there a way to use SVG in this code?

[@InsideTheSquare]

Nope! SVG's aren't supported by Squarespace yet. You can add one to page content using a code block, but not replace an element that doesn't support that file type without having to overwrite it with some javascript. if you do have an SVG that you want to add to a page, this tutorial can help: insidethesquare.co/squarespace-tutorials/svg

[@KelLe-mv6es]

but when we share the website as a link doesnt look good. How to fix?

[@InsideTheSquare]

Great question! Your social share image can be set for any individual page. Here is an article with more info: support.squarespace.com/hc/en-us/articles/205812778-Adding-social-sharing-images

[@filippogoa]

Hi! This code is not working any longer on my website, what can I do?

[@InsideTheSquare]

It's hard to say why it stopped working - nothing in this code recently changed 😕 Check out some of my troubleshooting tips here: insidethesquare.co/code-help

[@gilbertodiaz4550]

Hi, can you please show how to change the logo when the mobile drop down menu opens please.

[@InsideTheSquare]

This is a great question! I'll add your suggestion to my tutorial to do list; stay tuned :)

[@jacklattie]

Hi there! I happened to notice that my logo is repeating in the header of the mobile version after adding in this code. Any suggestions?

[@InsideTheSquare]

Great question! Try adding this property and value to your code: background-repeat: no-repeat!important

[@jacklattie]

@@InsideTheSquare Thank you!

[@the.visual.cue_]

What is the code to change the mobile logo only for one page?

[@InsideTheSquare]

It would be the same code to change it on your entire site (.header-display-mobile .header-title-logo) but how you install it makes all the difference. You can install the code in the page header code injection on the individual page, or in a code block on that page.

[@KimTorres-l4x]

I've changed the page code but now it shows up as a repeat.... any help?

[@InsideTheSquare]

Try adding background-repeat: no-repeat ot uploading a larger image that to fit inside the logo container 👍👍

[@AshleyVafeas]

@@InsideTheSquare Thank you for this and all of your other tutorials! They are awesome. The same this is happening to me, but only on mobile. I tried adding the no-repeat line, but that made the logo disappear completely. It's already 2403 × 1254 so I don't really want to make it bigger. Any suggestions?

[@leonardoscalise_AI]

@@AshleyVafeas Just had the same issue. Thanks god there's ChatGPT. Here is the code that solved the problem for me: .header-title { background-image: url('YOUR-IMAGE-HERE'); background-size: contain; background-repeat: no-repeat; background-position: center; /* Center the logo by default */ } .header-title img { opacity: 0; } /* Adjustments for mobile devices */ @media (max-width: 768px) { .header-title { background-position: left center; /* Aligns the logo to the left on mobile */ } }

[@nicholasking1907]

I've found a fix for this! div.header-title-logo a { content :url("image url here") !important; max-height: 70px; }

[@davypelletier]

Hey that's cool.

[@InsideTheSquare]

Thanks - I thought so too! ☺️