Automatically make white logo black

Site URL: https://www.jennifermag.com

Hey all,

My wife's site is built with Farro. It works great for pages with banner images. But for pages that do not have the banner, the white logo is on a white background and therefore invisible.

Is there a way to have an alternative version that is black for white pages like this: https://www.jennifermag.com/about

Thanks,
Dave

20 minutes ago, davecooperphoto said:

Site URL: https://www.jennifermag.com

Hey all,

My wife's site is built with Farro. It works great for pages with banner images. But for pages that do not have the banner, the white logo is on a white background and therefore invisible.

Is there a way to have an alternative version that is black for white pages like this: https://www.jennifermag.com/about

Thanks,
Dave

Could you provide the list of pages that have blank header and the black version of the logo?

Add this code to Page Settings > Advanced > Header

<style>
  .Header-branding-logo {
    filter: invert(1);
}
  img.Mobile-bar-branding-logo {
    filter: invert(1);
}
</style>

9 minutes ago, tuanphan said:

Add this code to Page Settings > Advanced > Header

<style>
  .Header-branding-logo {
    filter: invert(1);
}
  img.Mobile-bar-branding-logo {
    filter: invert(1);
}
</style>

 

That's briliant!

On 6/16/2020 at 1:26 AM, tuanphan said:

Add this code to Page Settings > Advanced > Header

<style>
  .Header-branding-logo {
    filter: invert(1);
}
  img.Mobile-bar-branding-logo {
    filter: invert(1);
}
</style>

 

This works but it changes things site wide. I only want to change it for pages that have a white background like this one: https://www.jennifermag.com/about

Thanks,
Dave

Hi davecooperphoto,

To add the code @tuanphan provided you to individual page, try to edit the page settings and add it into this