Change logo color on a specific page of site

Site URL: https://mandarin-turtle-hz69.squarespace.com/

Hi, I would like to swap a white logo, to a dark blue logo on some pages of my site where the header area is white. Can you please help?  The logo is white knocked out of blue on the homepage. I'd like it blue on white on this page: https://mandarin-turtle-hz69.squarespace.com/our-work/compass

Thank you!

On 3/3/2022 at 3:43 AM, ResrieRocks said:

Site URL: https://mandarin-turtle-hz69.squarespace.com/

Hi, I would like to swap a white logo, to a dark blue logo on some pages of my site where the header area is white. Can you please help?  The logo is white knocked out of blue on the homepage. I'd like it blue on white on this page: https://mandarin-turtle-hz69.squarespace.com/our-work/compass

Thank you!

Try adding to Home > Design > Custom Css

#item-62166b51f3f36f51b22d9d24 .header-title-logo  img {
  /* filter: invert(1); */
  visibility: hidden;
}

#item-62166b51f3f36f51b22d9d24 .header-title-logo:after {
  content:'';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('https://images.unsplash.com/photo-1646379887973-f1648f744912?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: absolute;
  top: 0;
  left:0;
}

Change the url with the link to blue logo

Let me know how it works on your site.

Support me by pressing 👍 if this useful for you

This worked great! Thank you. Can you please share how I would change the code to implement this on any other additional pages? The logo image link I used is https://images.squarespace-cdn.com/content/v1/6215166efce15d2007252bbe/3ee2eecc-982a-4376-a842-a7eaa5350433/RP+Bulders+Vector+Logo-01.png

I really appreciate your help.

leslie

Just now, ResrieRocks said:

This worked great! Thank you. Can you please share how I would change the code to implement this on any other additional pages? The logo image link I used is https://images.squarespace-cdn.com/content/v1/6215166efce15d2007252bbe/3ee2eecc-982a-4376-a842-a7eaa5350433/RP+Bulders+Vector+Logo-01.png

I really appreciate your help.

leslie

 

You can copy my code into the new one and change the page id for the it.

Kindly install the extension Squarespace ID Finder: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Use it to get the right page id: http://recordit.co/qwnj09oNCa

This is page id in my code

Hi there again bangank36!

So, from a visual standpoint this all worked. However, the blue logo no longer is a link to the homepage. It only works on the original white logo. Thoughts on this?

Here are the pages that I've implemented the code for so far:

https://mandarin-turtle-hz69.squarespace.com/our-work

https://mandarin-turtle-hz69.squarespace.com/our-work/compass

https://mandarin-turtle-hz69.squarespace.com/our-work/lsp

Here is the custom CSS that is currently in the site:

#item-62166b51f3f36f51b22d9d24
.header-title-logo  img {
  /* filter: invert(1); */
  visibility: hidden;
}

#item-62166b51f3f36f51b22d9d24 
.header-title-logo:after {
  content:'';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('https://images.squarespace-cdn.com/content/v1/6215166efce15d2007252bbe/3ee2eecc-982a-4376-a842-a7eaa5350433/RP+Bulders+Vector+Logo-01.png&auto=format&fit=crop&w=871&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: absolute;
  top: 0;
  left:0;
}

#item-62223ffe3db1a36e6ae199b5
.header-title-logo  img {
  /* filter: invert(1); */
  visibility: hidden;
}

#item-62223ffe3db1a36e6ae199b5
.header-title-logo:after {
  content:'';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('https://images.squarespace-cdn.com/content/v1/6215166efce15d2007252bbe/3ee2eecc-982a-4376-a842-a7eaa5350433/RP+Bulders+Vector+Logo-01.png&auto=format&fit=crop&w=871&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: absolute;
  top: 0;
  left:0;
}

#collection-62166b51f3f36f51b22d9d23
.header-title-logo  img {
  /* filter: invert(1); */
  visibility: hidden;
}

#collection-62166b51f3f36f51b22d9d23
.header-title-logo:after {
  content:'';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('https://images.squarespace-cdn.com/content/v1/6215166efce15d2007252bbe/3ee2eecc-982a-4376-a842-a7eaa5350433/RP+Bulders+Vector+Logo-01.png&auto=format&fit=crop&w=871&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: absolute;
  top: 0;
  left:0;
}
 

On 3/4/2022 at 11:46 PM, ResrieRocks said:

Hi there again bangank36!

So, from a visual standpoint this all worked. However, the blue logo no longer is a link to the homepage. It only works on the original white logo. Thoughts on this?

Here are the pages that I've implemented the code for so far:

https://mandarin-turtle-hz69.squarespace.com/our-work

https://mandarin-turtle-hz69.squarespace.com/our-work/compass

https://mandarin-turtle-hz69.squarespace.com/our-work/lsp

 

Here is the custom CSS that is currently in the site:

#item-62166b51f3f36f51b22d9d24
.header-title-logo  img {
  /* filter: invert(1); */
  visibility: hidden;
}

#item-62166b51f3f36f51b22d9d24 
.header-title-logo:after {
  content:'';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('https://images.squarespace-cdn.com/content/v1/6215166efce15d2007252bbe/3ee2eecc-982a-4376-a842-a7eaa5350433/RP+Bulders+Vector+Logo-01.png&auto=format&fit=crop&w=871&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: absolute;
  top: 0;
  left:0;
}

#item-62223ffe3db1a36e6ae199b5
.header-title-logo  img {
  /* filter: invert(1); */
  visibility: hidden;
}

#item-62223ffe3db1a36e6ae199b5
.header-title-logo:after {
  content:'';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('https://images.squarespace-cdn.com/content/v1/6215166efce15d2007252bbe/3ee2eecc-982a-4376-a842-a7eaa5350433/RP+Bulders+Vector+Logo-01.png&auto=format&fit=crop&w=871&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: absolute;
  top: 0;
  left:0;
}

#collection-62166b51f3f36f51b22d9d23
.header-title-logo  img {
  /* filter: invert(1); */
  visibility: hidden;
}

#collection-62166b51f3f36f51b22d9d23
.header-title-logo:after {
  content:'';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('https://images.squarespace-cdn.com/content/v1/6215166efce15d2007252bbe/3ee2eecc-982a-4376-a842-a7eaa5350433/RP+Bulders+Vector+Logo-01.png&auto=format&fit=crop&w=871&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center center;
  position: absolute;
  top: 0;
  left:0;
}
 

Have you solved it yet?

No I haven't. Do you know why this might happen? Any thoughts to resolve it?

On 3/8/2022 at 1:16 AM, ResrieRocks said:

No I haven't. Do you know why this might happen? Any thoughts to resolve it?

Hi. Can you share link to a page where you have problem?