Dynamic Logo (Light/Dark)

Hello! Is there a way to have the heading logo change based on the dynamic background for the page? It seems silly that there is a dynamic header design option without the ability to implement at least a light and dark logo version.

Thanks for the help!

You can add custom code on each page to do this. If you still need help, please share link to your site

Bumping this for the same issue. Dynamic header is a great feature except it only applies to text and buttons. It would be great to be able to upload dark and light logo options to update dynamically too!

I also have the added dilemma of wanting to use the gradient behind the nav on the homepage (as I'm using a video background), and then dynamic on all other pages.

https://cod-hibiscus-mlx3.squarespace.com
pass: justlove

16 hours ago, CraigN said:

Bumping this for the same issue. Dynamic header is a great feature except it only applies to text and buttons. It would be great to be able to upload dark and light logo options to update dynamically too!

I also have the added dilemma of wanting to use the gradient behind the nav on the homepage (as I'm using a video background), and then dynamic on all other pages.

https://cod-hibiscus-mlx3.squarespace.com
pass: justlove

You found the solution or you need help?

6 hours ago, tuanphan said:

You found the solution or you need help?

I still need help please, the homepage and about page work because they have dark headers (I uploaded a white logo). But on the events page this then gets lost, where ideally it would show a dark version of the logo.

 

22 hours ago, CraigN said:

I still need help please, the homepage and about page work because they have dark headers (I uploaded a white logo). But on the events page this then gets lost, where ideally it would show a dark version of the logo.

 

Try adding to Design > Custom CSS

body[class*="type-blog"], [class*="type-events"], [class*="type-products"] {
header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
} 

This works, brilliant thank you @tuanphan!

Holy Cow. ive been looking for the solution to this, and here it is in 3 seconds. thank you!

Is there any chance of being able to change the dark colour, to a grey and not a solid black? I've been wanting this solution for ages and that code works a treat, but would just love if i could change to a grey colour. Thanks!

On 11/16/2022 at 11:31 PM, JeSuis said:

Is there any chance of being able to change the dark colour, to a grey and not a solid black? I've been wanting this solution for ages and that code works a treat, but would just love if i could change to a grey colour. Thanks!

Hi,No

The code can change to white or black only

To change to grey, you need to use this new code, with new grey image url

body[class*="type-blog"], [class*="type-events"], [class*="type-products"] {
header#header img {
    content: url(https://cdn.pixabay.com/photo/2022/10/21/10/51/snail-7536762_1280.jpg);
}
} 

Replace Pixabay image with a grey image url

For a simple inverting of the header logo color site wide, this works. Place in your Custom CSS:

//Invert header logo color on dark themed Sections
.dark, .dark-bold, .black, .black-bold {
  &.header .header-title-logo a {
    filter: invert(1);
    -webkit-filter: invert(1);
}}

Thanks to https://spacesites.com.au/tips/squarespace-71-2-methods-to-swap-out-logos-colour-sections-and-specific-pages for the tip and cheat sheet on theme colors. Alternatively, you could switch out the logo graphic as described in the spacesite.com link above.

Wondering if/how this code would work on my site? I have images in the header of all pages, so the white logo works as intended. However on the individual blog post pages, I cannot do that. So I had to give the pages a light color background so that the white logo will appear. I don't love this. I would prefer the blog pages were white background like the rest of the site. So is there a way to code so that each individual blog post would have a dark header area only (and then I can leave the rest of the page white)? Thank you!

Site is https://www.grandonelounge.com

On 9/7/2022 at 9:44 AM, tuanphan said:

Try adding to Design > Custom CSS

body[class*="type-blog"], [class*="type-events"], [class*="type-products"] {
header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
} 

 

On 2/3/2023 at 7:15 PM, MJB1923 said:

Wondering if/how this code would work on my site? I have images in the header of all pages, so the white logo works as intended. However on the individual blog post pages, I cannot do that. So I had to give the pages a light color background so that the white logo will appear. I don't love this. I would prefer the blog pages were white background like the rest of the site. So is there a way to code so that each individual blog post would have a dark header area only (and then I can leave the rest of the page white)? Thank you!

Site is https://www.grandonelounge.com

 

Use this

body[class*="type-blog"].view-item header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

On 2/4/2023 at 10:26 PM, tuanphan said:

body[class*="type-blog"].view-item header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

I will give that a try -- thank you!

Hi Tuan,
 

Thank you for you help on this forum, I have found plenty of solutions from you al ready.

Now I have the same question as above, however, I would like to change the picture of the logo on all the lighter pages of my website.

Maybe a combo of these two?

//Invert header logo color on dark themed Sections
.dark, .dark-bold, .black, .black-bold {
  &.header .header-title-logo a {
    filter: invert(1);
    -webkit-filter: invert(1);
}}

And this

Quote

body[class*="type-blog"], [class*="type-events"], [class*="type-products"]
{
header#header img {
    content: url(https://images.squarespace-cdn.com/content/62aba5522f5ccd5bc3b91ed1/23be3678-e89f-40b3-9f03-20ebc474fadb/Artboard+4.png?content-type=image%2Fpng);
}
}

Would that be possible? This is an example of my SP pages with the faulty logo color https://bronze-arugula-pk75.squarespace.com/mission

Thanks in advance

Thijs

On 4/4/2023 at 5:17 PM, Thijs00 said:

Hi Tuan,
 

Thank you for you help on this forum, I have found plenty of solutions from you al ready.

Now I have the same question as above, however, I would like to change the picture of the logo on all the lighter pages of my website.

Maybe a combo of these two?

//Invert header logo color on dark themed Sections
.dark, .dark-bold, .black, .black-bold {
  &.header .header-title-logo a {
    filter: invert(1);
    -webkit-filter: invert(1);
}}

And this

Would that be possible? This is an example of my SP pages with the faulty logo color https://bronze-arugula-pk75.squarespace.com/mission

Thanks in advance

Thijs

You can try

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

//logo kleur dynamisch
body
[class*='collection-type-blog'],
[class*='collection-62aba8aa57c97a47c18f05fa'],
[class*='collection-62f104a3b403ca581b0d89ee'],


{
header#header img {
    content: url(https://images.squarespace-cdn.com/content/62aba5522f5ccd5bc3b91ed1/b85b097d-2597-429c-922a-3f0bfa142e1a/Artboard+2.png?content-type=image%2Fpng);
}
}

I have figured out a different way, I have the reversed the standard logo with a darker colour, and only changed the homepage and some extra pages manually. This work perfect.
Thanks for your help.

Holy cow. Ty tuanphan what an elegant/quick solution. Just popping in to say thank you, you saved me hours of trial and error.

Our logo has multiple colors that can't be inverted properly, is there a way to do this that simply switches between 2 different pngs?

On 6/16/2023 at 2:45 AM, STC said:

Our logo has multiple colors that can't be inverted properly, is there a way to do this that simply switches between 2 different pngs?

Yes. What is your site url?

Our current website is sgftechcouncil.com the squarespace version is not public yet 

On 6/19/2023 at 11:02 PM, STC said:

Our current website is sgftechcouncil.com the squarespace version is not public yet 

You can setup an access password & share url, we can check easier

Similar ask - I have a white logo for the website, but for the blog landing page and posts, I'd like to use a colour version of my logo. I've seen how to invert it, but would someone mind giving me the code to use a different image file? Thank you!!

www.heartlifted.com  
https://www.heartlifted.com/blog
https://www.heartlifted.com/blog/6-traits-of-a-successful-entrepreneur

16 hours ago, jenhorvath said:

Similar ask - I have a white logo for the website, but for the blog landing page and posts, I'd like to use a colour version of my logo. I've seen how to invert it, but would someone mind giving me the code to use a different image file? Thank you!!

www.heartlifted.com  
https://www.heartlifted.com/blog
https://www.heartlifted.com/blog/6-traits-of-a-successful-entrepreneur

You can use this code to Design > Custom CSS (or Website > Website Tools > Custom CSS)

/* Blog new logo */
body[class*="type-blog"] header#header img {
    content: url(https://cdn.pixabay.com/photo/2023/05/13/14/35/white-flower-7990645_1280.jpg);
}

@tuanphan Thank you so much! It worked perfectly. 
I appreciate your generosity in helping me and other circle members. 🙏