Reversing logo color on single page, Brine template, 7.0

Site URL: https://girlwithoutatripod.com/

I am trying to revers my black png logo to white on the Home and About page where it appears on top of a photo.

I have tried 2 different codes (see below)  and still the logo appears gray instead of white. 

Also, on all other pages where the logo should appear black, instead it is showing up as gray and I have no idea why. These issues are on both desktop and iPad when I log in to the website. When I’m actually in Squarespace the logo is black on the white pages as it should be. Everything looks ok on a phone.

Here are the codes I’ve inserted on the home and about page to get the logo to look white:

Code A

<style>

.Header-branding-logo {

-webkit-filter: invert(100%);

filter: invert(100%);

}

</style>

Code B

<style>

.Header-branding-logo {

    -webkit-filter: invert(100%);

    filter: invert(100%);  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');

  }

</style>

Would be thrilled if someone would be able to help and let me know what I'm doing wrong! I have searched high and low for a solution without any luck…

Thanks!

59 minutes ago, HelenC said:

Site URL: https://girlwithoutatripod.com/

I am trying to revers my black png logo to white on the Home and About page where it appears on top of a photo.

I have tried 2 different codes (see below)  and still the logo appears gray instead of white. 

Also, on all other pages where the logo should appear black, instead it is showing up as gray and I have no idea why. These issues are on both desktop and iPad when I log in to the website. When I’m actually in Squarespace the logo is black on the white pages as it should be. Everything looks ok on a phone.

Here are the codes I’ve inserted on the home and about page to get the logo to look white:

Code A

<style>

.Header-branding-logo {

-webkit-filter: invert(100%);

filter: invert(100%);

}

</style>

 

Code B

<style>

.Header-branding-logo {

    -webkit-filter: invert(100%);

    filter: invert(100%);  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');

  }

</style>

 

Would be thrilled if someone would be able to help and let me know what I'm doing wrong! I have searched high and low for a solution without any luck…

Thanks!

what is your site url

https://girlwithoutatripod.com/

1 hour ago, HelenC said:

https://girlwithoutatripod.com/

use this filter options, since your logo is gray not black

filter: brightness(0) invert(1);

Thank you BaNgan! It worked- the logo is now white when it appears on top of an image (I added your code on those 2 specific pages)! The problem is that the logo now is white on the pages where it was black before. See attached screen shots. I don't understand why since the logo I uploaded is black to begin with and I haven't added any custom code to those pages? I would be super grateful if you would be able to help figure out this issue. Thanks!

I want to provide an update that your code DID work! The issue was that the feature Ajax loading was enabled, which prevented the header and footer from reloading when navigating  between pages. 

Thanks again for your help and quick response!