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