Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

How to change logo on specific pages in 7.1?


paulzforeman

Question

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

17 answers to this question

Recommended Posts

  • 1
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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
  • 0

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?

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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