How do I change my Logo colour in the header on some pages?

Site URL: https://lizard-cymbals-zmyf.squarespace.com

Hi, 

I am having trouble with my Site header logo. I am using the Zion template. I require it to be black for most of the site as my the backgrounds are white but when it comes to the main page I would love for it to be white. Is anyone here confident with code who could help me invert the colour just for that main page, please? 

Thank you, 

Jessica

Can you setup password& share url? Your site is private

If you go to Page Settings and Advanced, you can add this code to the Page Header Code Injection for the pages you want to invert the color.

<style type="text/css">
	.header-title-logo img {
	  filter:invert(1);
	}
</style>

Tuan, thank you! Chris's suggestion worked. But for future reference how do I do this? I'm such a newbie still. Haha. 

Chris, Thank you so much that worked an absolute treat!!! 😄 

Sorry, actually that didn't work. 😞 It has seemed to invert the colour but on all the page headers, not just the single one. 

Its a bit complicated, but this should help you at this link, and you might also need the Squarespace block identifier extension for chrome. I put the link at the bottom, it is a great thing to have if not now later. 

https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde?hl=en-US

23 hours ago, Jessssica said:

Sorry, actually that didn't work. 😞 It has seemed to invert the colour but on all the page headers, not just the single one. 

 

Add to Home > Design > Custom CSS

.homepage .header-title-logo img {
    filter: invert(1);
}

Hi there,

I have the same problem, and in my case the custom Css suggested by @tuanphan works only by changing .homepage with the page id BUT it does invert the color on all the collections linked from this page.

In my site (https://www.adrianaforconiphotography.com) the Zion's homepage is no longer the home but the rest of my site is exactly the same as in the Zion template.

If you check the Zion template the logo is supposed to change from black to white ONLY on the homepage but it s black again on the collections pages linked on the home, and on the rest of the pages.

Hope someone can help with this.
 

Cheers

On 5/14/2021 at 6:31 PM, adrianafo said:

Hi there,

I have the same problem, and in my case the custom Css suggested by @tuanphan works only by changing .homepage with the page id BUT it does invert the color on all the collections linked from this page.

In my site (https://www.adrianaforconiphotography.com) the Zion's homepage is no longer the home but the rest of my site is exactly the same as in the Zion template.

If you check the Zion template the logo is supposed to change from black to white ONLY on the homepage but it s black again on the collections pages linked on the home, and on the rest of the pages.

Hope someone can help with this.
 

Cheers

 

I see your site fine here. Which page do you have problem?

Wow! Then honestly I really don't know what happened here! Everything is working just as it has to be!
Anyway, thank you so much and sorry for bothering!  😍

Hi, 

I only want to invert the logo on my portfolio landing page and not the subpages within my portfolio. Is this possible? 

On 4/27/2022 at 1:15 AM, theculturedivision said:

Hi, 

I only want to invert the logo on my portfolio landing page and not the subpages within my portfolio. Is this possible? 

Yes. Possible. Can you share link to portfolio & do you use Personal or Business Plan? Each plan will have a different code

7 hours ago, tuanphan said:

Yes. Possible. Can you share link to portfolio & do you use Personal or Business Plan? Each plan will have a different code

Hi, yes. 

My site is theculturedivision.com and I use Personal. 

Thanks. 

On 4/29/2022 at 11:30 PM, theculturedivision said:

Hi, yes. 

My site is theculturedivision.com and I use Personal. 

Thanks. 

Design page? Add to Design > Custom CSS

body.collection-62683421b45ca03bd14d9824.view-list header#header img {
    filter: invert(0);
}

With Sub pages, change .view-list to .view-item, it should be

body.collection-62683421b45ca03bd14d9824.view-item header#header img {
    filter: invert(0);
}

On 5/1/2022 at 8:38 AM, tuanphan said:

Design page? Add to Design > Custom CSS

body.collection-62683421b45ca03bd14d9824.view-list header#header img {
    filter: invert(0);
}

With Sub pages, change .view-list to .view-item, it should be

body.collection-62683421b45ca03bd14d9824.view-item header#header img {
    filter: invert(0);
}

 

Hi, 

I tried adding the first code to the custom CSS but the logo is still showing on my Design portfolio page. Any help?

Thanks

On 5/2/2022 at 11:51 PM, theculturedivision said:

Hi, 

I tried adding the first code to the custom CSS but the logo is still showing on my Design portfolio page. Any help?

Thanks

You want to hide logo or invert logo color?

On 5/5/2022 at 2:02 PM, tuanphan said:

You want to hide logo or invert logo color?

I want to invert it as the background for the page is black. I only want it for that page and not it's subpages. 

On 5/9/2022 at 6:07 PM, theculturedivision said:

I want to invert it as the background for the page is black. I only want it for that page and not it's subpages. 

In Custom CSS, edit this code

body.collection-62683421b45ca03bd14d9824.view-list header#header img {
    filter: invert(0);
}

to this

body.collection-62683421b45ca03bd14d9824.view-list header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

22 hours ago, tuanphan said:

In Custom CSS, edit this code

body.collection-62683421b45ca03bd14d9824.view-list header#header img {
    filter: invert(0);
}

to this

body.collection-62683421b45ca03bd14d9824.view-list header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

 

Hi, that's excellent. thanks. 

On the subpages (e.g https://www.theculturedivision.com/design/brand), the logo is still inverted. Is there a way of stopping that and keeping it solely inverted on the main page? 

On 5/12/2022 at 3:01 PM, theculturedivision said:

Hi, that's excellent. thanks. 

On the subpages (e.g https://www.theculturedivision.com/design/brand), the logo is still inverted. Is there a way of stopping that and keeping it solely inverted on the main page? 

You have this code in Page Header or Code Injection, remove it

.header-title-logo img {
    filter: invert(1);
}

or add this to DESIGN > CUSTOM CSS to override it

body.collection-62683421b45ca03bd14d9824.view-item header#header img {
    filter: invert(0);
}

Hi!

I used the code above to fix the same issue: I want the header logo white (inverted) on homepage, and to stay black (original) on the rest. And it worked! But, I'm using an overlay mobile menu for desktop as well, and the background of the overlay menu is white -> hence on that, I'd love to also have the logo black. Is there a way to do this?

On 10/27/2022 at 12:59 AM, ep_sm said:

Hi!

I used the code above to fix the same issue: I want the header logo white (inverted) on homepage, and to stay black (original) on the rest. And it worked! But, I'm using an overlay mobile menu for desktop as well, and the background of the overlay menu is white -> hence on that, I'd love to also have the logo black. Is there a way to do this?

What is your site url? We can check easier

Hi there, I'm having issues inverting my logo's colour on specific sections rather than pages. I've tried this code:

.dark, .dark-bold, .black, .black-bold {
&.header .header-title-logo a {
    filter: invert(1);
    -webkit-filter: invert(1);}}

Also tried inserting the new logo's image link instead of filter in the formula above, but it changes the logo on the whole page using dark or black as a first section. 

Ideally, I'd like the logo to switch effortlessly between black and white as I scroll through the page, depending on each sections. Does anyone know how to do this? X

On 9/20/2023 at 12:50 AM, AlexiaD said:

Hi there, I'm having issues inverting my logo's colour on specific sections rather than pages. I've tried this code:

.dark, .dark-bold, .black, .black-bold {
&.header .header-title-logo a {
    filter: invert(1);
    -webkit-filter: invert(1);}}

Also tried inserting the new logo's image link instead of filter in the formula above, but it changes the logo on the whole page using dark or black as a first section. 

Ideally, I'd like the logo to switch effortlessly between black and white as I scroll through the page, depending on each sections. Does anyone know how to do this? X

What is page url? We can check easier