Changing Logo Color on Different Site Pages

On 1/23/2024 at 12:13 AM, ianmcnairy said:

Thanks for the reply! I am new to this so not sure it's in the right spot. Here is a snip of the code. It's located in the "pages" index settings. Is this correct? You can see the logo is still black and the text is white. Any thoughts?

 

No. You need to add it to Custom CSS box

Hi @tuanphan & @rwp

I am having a similar problem - I need the logo and navigation to appear white, then move back to black once I start scrolling. Can you please help?

Website: https://gold-eagle-j8bb.squarespace.com/

Password:Littlefoodmarket

On 1/25/2024 at 12:52 AM, tuanphan said:

No. You need to add it to Custom CSS box

Thanks for the explanation! It works but inverts the color exactly opposite from the auto change. I thought I could bypass by changing the base logo color to white but then on the project pages is disappears in the white background. Any thoughts?

I am having the same issue, can someone help me?

23 hours ago, SophieCartwright said:

Hi @tuanphan & @rwp

 

I am having a similar problem - I need the logo and navigation to appear white, then move back to black once I start scrolling. Can you please help?

 

Website: https://gold-eagle-j8bb.squarespace.com/

Password:Littlefoodmarket

You can use this CSS code

header#header div.header-nav-item>a {
    color: white;
}
header#header.shrink div.header-nav-item>a {
    color: black !important;
}
header#header.shrink img {
    filter: invert(0);
    -webkit-filter: invert(0);
}

How about mega menu is open? Change color or keep current color?

8 hours ago, ianmcnairy said:

Thanks for the explanation! It works but inverts the color exactly opposite from the auto change. I thought I could bypass by changing the base logo color to white but then on the project pages is disappears in the white background. Any thoughts?

Can you share link to project page? and list page or detail page?

8 hours ago, er0ck05 said:

I am having the same issue, can someone help me?

Can you share link to page where you have problem?

12 hours ago, tuanphan said:

You can use this CSS code

header#header div.header-nav-item>a {
    color: white;
}
header#header.shrink div.header-nav-item>a {
    color: black !important;
}
header#header.shrink img {
    filter: invert(0);
    -webkit-filter: invert(0);
}

How about mega menu is open? Change color or keep current color?

Can you share link to project page? and list page or detail page?

Can you share link to page where you have problem?

https://ianmcnairyarchitecture.com/projects

You can see as the images scroll through the logo changes from white to black opposite from the navigation and title.

On 1/30/2024 at 11:55 PM, ianmcnairy said:

https://ianmcnairyarchitecture.com/projects

You can see as the images scroll through the logo changes from white to black opposite from the navigation and title.

Logo is fine on project pages

https://ianmcnairyarchitecture.com/creek-house-2

8 hours ago, tuanphan said:

Logo is fine on project pages

https://ianmcnairyarchitecture.com/creek-house-2

Hi, yes thankyou, the logo is good on the individual project pages, but not on the main navigation page. See image below for example. As the images scroll through on the index page the logo changes opposite from the navigation and title text. 

On 2/3/2024 at 1:25 AM, ianmcnairy said:

Hi, yes thankyou, the logo is good on the individual project pages, but not on the main navigation page. See image below for example. As the images scroll through on the index page the logo changes opposite from the navigation and title text. 

Try this code to Custom CSS box

div#canvas[class*="-light"] .logo img {
    filter: invert(1) !important;
    -webkit-filter: invert(1);
}
div#canvas[class*="-dark"] .logo img {
    filter: invert(0) !important;
    -webkit-filter: invert(0);
}
img[data-weight-topleft="dark"]~.collection-detail-wrapper a {
    background-color: black !important;
    color: white !important;
}
img[data-weight-topleft="light"]~.collection-detail-wrapper a {
    background-color: white !important;
    color: black !important;
}

14 hours ago, tuanphan said:

Try this code to Custom CSS box

div#canvas[class*="-light"] .logo img {
    filter: invert(1) !important;
    -webkit-filter: invert(1);
}
div#canvas[class*="-dark"] .logo img {
    filter: invert(0) !important;
    -webkit-filter: invert(0);
}
img[data-weight-topleft="dark"]~.collection-detail-wrapper a {
    background-color: black !important;
    color: white !important;
}
img[data-weight-topleft="light"]~.collection-detail-wrapper a {
    background-color: white !important;
    color: black !important;
}

 

Its closer! The logo and title (upper/lower left) are the same but now the navigation bar is the opposite color. Thanks so much for your help with this complicated request!

2 hours ago, ianmcnairy said:

Its closer! The logo and title (upper/lower left) are the same but now the navigation bar is the opposite color. Thanks so much for your help with this complicated request!

After looking closer, it appears the logo and title are the opposite color from what they should be. In this image they both should be black. Hope that makes sense.

Hello! I'm having the same issue as the others. Homepage looks great with White logo and other pages need to have black logo. Is someone able to help? Link to site below:

https://pumpkin-tomato-ast4.squarespace.com/home

On 2/6/2024 at 12:50 AM, ianmcnairy said:

Its closer! The logo and title (upper/lower left) are the same but now the navigation bar is the opposite color. Thanks so much for your help with this complicated request!

With nav, use this code

div#canvas[class*="-dark"] ul.cf a {
    color: white !important;
}
div#canvas[class*="-light"] ul.cf a {
    color: black !important;
}

On 2/7/2024 at 3:12 AM, JordanInfascelli said:

Hello! I'm having the same issue as the others. Homepage looks great with White logo and other pages need to have black logo. Is someone able to help? Link to site below:

 

https://pumpkin-tomato-ast4.squarespace.com/home

The site is expired, you can access this link to extend it for free

15 hours ago, tuanphan said:

The site is expired, you can access this link to extend it for free

 

Just extended it!

On 2/9/2024 at 2:08 AM, JordanInfascelli said:

Just extended it!

The site is private now. You can follow this guide to share url

On 2/9/2024 at 2:08 AM, JordanInfascelli said:

Just extended it!

 You can use this code to Custom CSS box

body:not(.homepage) header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

Hi @tuanphan I have to change the colors of logos on multiple pages: platedstudio.com is the website and I have looked through some of your previous replies and found this piece of code:
<style>
  .header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url('https://static1.squarespace.com/static/65df15fccbcf90118895651c/t/65f2c8a40ef92b117e45a17a/1710409892996/8.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
<style>

And I have put this in the Custom CSS but it says: Error on line 25 where the <style> is - the first one. 

I have also selected the different logo file too.. Can you help? Thanks!

23 hours ago, PandaTBD said:

Hi @tuanphan I have to change the colors of logos on multiple pages: platedstudio.com is the website and I have looked through some of your previous replies and found this piece of code:
<style>
  .header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url('https://static1.squarespace.com/static/65df15fccbcf90118895651c/t/65f2c8a40ef92b117e45a17a/1710409892996/8.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
<style>

And I have put this in the Custom CSS but it says: Error on line 25 where the <style> is - the first one. 

I have also selected the different logo file too.. Can you help? Thanks!

You need to add that code to Page Header Code Injection. If your site doesn't support Header Injection, you can share link to page where you want to change logo on your site, I will give new code for CSS box.