Logo Color Change

Hi there,

Hoping to get some help here - the logo that we'd like to use for our header nav has white text with a transparent background (ideal for a image background in the hero). 

The issue is that on subpages with a white background, the logo isn't readable. Can we show a different logo in the header nav on specific pages within the website? 

Thanks,
Kevin

Hi Kevin, yep you can do this. Check out this great article for instructions:

https://schwartz-edmisten.com/blog/alternate-logo-with-transparent-header-in-squarespace-71

If you share your site url, we can help easier

https://aqua-turbot-b9hj.squarespace.com/config/pages/website-tools/custom-css

Yeah I'm struggling a little bit to get this figured out. Appreciate the help @tuanphan

On 8/4/2023 at 3:10 AM, kevinsaunders said:

https://aqua-turbot-b9hj.squarespace.com/config/pages/website-tools/custom-css

Yeah I'm struggling a little bit to get this figured out. Appreciate the help @tuanphan

Your site is private. Can you setup an access password?

Ok - done @tuanphan password is Squarespace

Hi @tuanphan we're running into a similar issue on a different website. Could you help with making the logo visible on these news / blog post pages specifically? 

https://www.redwingshoeco.com/blog-entries/summer-2023-internship-launch-announcement

On 8/25/2023 at 10:28 PM, kevinsaunders said:

Hi @tuanphan we're running into a similar issue on a different website. Could you help with making the logo visible on these news / blog post pages specifically? 

https://www.redwingshoeco.com/blog-entries/summer-2023-internship-launch-announcement

If you want to apply to all blog posts (detail post), use this to Custom CSS

body[class*="type-blog"].view-item .Header-branding-logo {
    filter: invert(1);
    -webkit-filter: invert(1);
}

Hi @tuanphan where do I add this Custom CSS? I tried adding it as a page header code injection on Blog Entries but that didn't resolve the issue

On 8/28/2023 at 8:09 PM, kevinsaunders said:

Hi @tuanphan where do I add this Custom CSS? I tried adding it as a page header code injection on Blog Entries but that didn't resolve the issue

Add it to Website > Website Tools > Custom CSS

If you want to add to Code Injection, you need to use this code

<style>
  body[class*="type-blog"].view-item .Header-branding-logo {
    filter: invert(1);
    -webkit-filter: invert(1);
}
</style>

Awesome - this worked. Thank you @tuanphan

Hello there,
by any chance there is a similar solution but for the following,
I have created a Home page based on a Portfolio page where there is a slideshow full bleed,
There it makes sense to have the logo in White, 

but the subpages have a white background, therefore a black logo is necessary there.

I have injected the code above, but it not only affects the Main portfolio page but also the subpages. Anyway to go around this? @tuanphan
Appreciate the help!

Home with a portfolio page + full bleed slideshow:
https://www.studiohelenaholz.com/home-3
Logo in black disappears.

Porfolio Subpage 

On 12/20/2023 at 9:25 PM, NitramHolz said:

Hello there,
by any chance there is a similar solution but for the following,
I have created a Home page based on a Portfolio page where there is a slideshow full bleed,
There it makes sense to have the logo in White, 

but the subpages have a white background, therefore a black logo is necessary there.

I have injected the code above, but it not only affects the Main portfolio page but also the subpages. Anyway to go around this? @tuanphan
Appreciate the help!

Home with a portfolio page + full bleed slideshow:
https://www.studiohelenaholz.com/home-3
Logo in black disappears.

 

Porfolio Subpage 

You used this code?

<style>
  header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
</style>

if you want it affect sub pages only, use this new code

<style>
body.view-item header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
</style>

If affect list page, use this

<style>
body.view-list header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
</style>