How to change logo on specific pages in 7.1?

Many versions of this question have been asked, but I'm a small business owner brand-new to Squarespace, I'm using 7.1, and so far none of the CSS solutions from previous versions of Squarspace seem to be working for me.

I want to change the logo for individual pages - on my home page, I want my logo in its normal full-color form. For the rest of the pages, I want it to be all in white (this is to keep it visible against the backgrounds I'm giving it). I have the two separate versions of the logo (color and white). The color logo is currently on all of my pages, and the white logo is uploaded in my custom files. Is there a bit of CSS code that I can use to replace the logo in the header on any one page?

Again, there are lots of answers to this already, but none are working, and I suspect it's because I am using 7.1. The answers all seem to be template-specific, but as far as I can tell, all of the templates are similar in 7.1, and I can't change my template to try different ones (??)

Sorry if my question was confusing. Thank you!

Hi Paul, I'm having the same problem and wondered if you found a solution?

I answered for some members this month. If you search "replace logo", "change logo" you will see some questions with answer.

Also, you can share link to your site here, I can take a look.

Thanks I think I've worked it out!

https://www.squarestylist.com/shop/change-logo-one-page?fbclid=IwAR2vuB712BLdC-ZomX4V-4q4PVimvwZOHilscS8DhCcVxf8-v99rTbw4nl0

This free tutorial worked perfect for me changing my logo on certain pages on the 7.1 version of squarespace 🙂

Thanks 🙂 

I have tried 3 different things that worked for other people in their 7.1 versions, but I cannot seem to get any of them to work... 

I  am trying to change the logo on the white minimal, white bold, light minimal, and light bold color variations. I have uploaded a 'secondary' version of my logo that has a teal 'GO' instead of it being beige. I have the code for this at the very top of my CSS panel. 

I am probably doing something very silly that's not allowing this work... would someone mind taking a look for me? Please and thank you!!!!!!!

https://elk-reed-69st.squarespace.com/

Username: callie.r.roberson@gmail.com

On 3/18/2021 at 10:13 PM, CallieR said:

I have tried 3 different things that worked for other people in their 7.1 versions, but I cannot seem to get any of them to work... 

I  am trying to change the logo on the white minimal, white bold, light minimal, and light bold color variations. I have uploaded a 'secondary' version of my logo that has a teal 'GO' instead of it being beige. I have the code for this at the very top of my CSS panel. 

I am probably doing something very silly that's not allowing this work... would someone mind taking a look for me? Please and thank you!!!!!!!

https://elk-reed-69st.squarespace.com/

Username: callie.r.roberson@gmail.com

Add to Page Header (page where you want to change logo)

<style>
  .header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

You are INCREDIBLE. That did the trick. Thank you SO MUCH!

Tuanphan – they code you recommended for changing out the logo on specific pages works. However, it's messing with the colors I've assigned to different sections on the page. Any recommendations on how to fix this?

On 3/23/2021 at 2:00 AM, mark6 said:

Tuanphan – they code you recommended for changing out the logo on specific pages works. However, it's messing with the colors I've assigned to different sections on the page. Any recommendations on how to fix this?

Can you share page url? We can check easier

I am looking for the same solution and tried the code above. The logo keeps getting cut off and the navigation disappears. I have tried multiple times to reduce the size of the logo I upload but it doesn't make a difference. I do also have code to force the navigation to mobile so perhaps that is the conflict. If anyone has a solution, I would be grateful.

This is the page https://verus-advisory.squarespace.com/thought-leadership

On 5/27/2021 at 1:42 AM, artpimpress said:

I am looking for the same solution and tried the code above. The logo keeps getting cut off and the navigation disappears. I have tried multiple times to reduce the size of the logo I upload but it doesn't make a difference. I do also have code to force the navigation to mobile so perhaps that is the conflict. If anyone has a solution, I would be grateful.

 

This is the page https://verus-advisory.squarespace.com/thought-leadership

change to

Quote

background-size: contain;

9 hours ago, tuanphan said:

change to

 

Thank you! That worked perfectly. I am so grateful.

Is there also a way to resize the image container when replacing the logo so that proportionally it can match any other nav logos cross-site?

Thanks

On 9/9/2021 at 6:45 PM, richardgreencreative said:

Is there also a way to resize the image container when replacing the logo so that proportionally it can match any other nav logos cross-site?

Thanks

Hi,

What is your site url?

Morning @tuanphan

URL: www.richardgreencreative.com/wedding-films

I have already replaced the logo but it's proportionally smaller than my other logo across the remainder of the site.

Thanks

On 9/13/2021 at 5:47 PM, richardgreencreative said:

Morning @tuanphan

URL: www.richardgreencreative.com/wedding-films

I have already replaced the logo but it's proportionally smaller than my other logo across the remainder of the site.

Thanks

you can change

background-size: contain;

to

background-size: 100px;

adjust number 100

Hello, 

We're having the same issue (www.jetztpat.com) as the original asker of this post. None of the HTML options provided have quite worked... @tuanphanI used the bit of code you provided in the page headers, but now the logo is layered on certain pages (see screenshots).  

I just searched through the pages again, and now can't see the code bit I had previously entered (above) anywhere, which is.... odd? 

Any help is greatly appreciated!!

On 12/16/2021 at 6:19 PM, jetztpat said:

Hello, 

We're having the same issue (www.jetztpat.com) as the original asker of this post. None of the HTML options provided have quite worked... @tuanphanI used the bit of code you provided in the page headers, but now the logo is layered on certain pages (see screenshots).  

I just searched through the pages again, and now can't see the code bit I had previously entered (above) anywhere, which is.... odd? 

Any help is greatly appreciated!!

To change logo on blog page to Black, don't remove any code in your current code

Add this to Design > Custom CSS

body[class*="collection-type-blog"] header#header img {
    filter: invert(1) !important;
    -webkit-filter: invert(1);
}

@tuanphan You still here? I would love some help. 

Your snippet of code 

<style>
  .header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/610bb16aa104af335d7c00d9/t/6268eb9a56ae8b2e235a7443/1651043227054/Hexaplanter-BlackLogo-Correct.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Works perfectly for me. But it does not show on mobile! What should I do?

https://www.hexaplanter.com/

On 4/27/2022 at 6:02 PM, yadiyadaErik said:

@tuanphan You still here? I would love some help. 

Your snippet of code 

<style>
  .header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/610bb16aa104af335d7c00d9/t/6268eb9a56ae8b2e235a7443/1651043227054/Hexaplanter-BlackLogo-Correct.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Works perfectly for me. But it does not show on mobile! What should I do?

https://www.hexaplanter.com/

Use this new code

<style>
 header#header img {
    content: url(https://static1.squarespace.com/static/610bb16aa104af335d7c00d9/t/6268eb9a56ae8b2e235a7443/1651043227054/Hexaplanter-BlackLogo-Correct.png);
}
</style>

On 12/19/2021 at 6:36 PM, tuanphan said:

To change logo on blog page to Black, don't remove any code in your current code

Add this to Design > Custom CSS

body[class*="collection-type-blog"] header#header img {
    filter: invert(1) !important;
    -webkit-filter: invert(1);
}

 

Is it possible to instead use CSS like this to point to a different image (rather than a straight 'invert'). My colour palette uses a very dark brown on white (rather than pure black)

On 6/5/2022 at 4:56 PM, maxbrewer said:

Is it possible to instead use CSS like this to point to a different image (rather than a straight 'invert'). My colour palette uses a very dark brown on white (rather than pure black)

Use this code

body[class*="collection-type-blog"] header#header img {
    content: url(https://cdn.pixabay.com/photo/2022/03/08/07/08/water-7055153__480.jpg);
}

Hi!
I have managed to change the logo to a different coloured one at some of my pages (for instance the page "Gallery") by going to the Page settings and paste some code, but for the mobile version I need to fix the size of the logo to max height 78px (that should be the same size as the logo on the other pages).
How do I do that?

Here is my website, no password:

spinach-sprout-hgc2.squarespace.com