Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

Posted

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

Posted

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

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

 

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

  • 1 year later...
Posted

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

 

Posted
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?

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

Posted

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

 

  • 11 months later...
Posted
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

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

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

 

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

Posted
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

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

 

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

Posted
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? 

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

 

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

  • 5 months later...
Posted

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?

Posted
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

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

  • 10 months later...
Posted

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

Posted
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

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

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.