Jump to content

How to change logo on specific pages in 7.1?

Recommended Posts

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!

Edited by paulzforeman
Initial Revision
Link to comment
  • 3 months later...
  • 1 year later...

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

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

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

Link to comment
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;

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...

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!!

Screen Shot 2021-12-16 at 12.09.28 PM.png

Screen Shot 2021-12-16 at 12.09.43 PM.png

Screen Shot 2021-12-16 at 12.09.48 PM.png

Link to comment
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!!

Screen Shot 2021-12-16 at 12.09.28 PM.png

Screen Shot 2021-12-16 at 12.09.43 PM.png

Screen Shot 2021-12-16 at 12.09.48 PM.png

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);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...

@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/

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
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)

Link to comment
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);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 months later...

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

Edited by Medvetenkultur
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.