Problems with logo's display on website

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

Hello, community.

I'm a new user of Squarespace's services and yesterday I ended uploading my website that I had already designed a couple months ago using Tremont template.

WIth this being said, let's expose my issue:

When I created my site, I had to use code to change the color of the logo on some pages because the colors matched tiyh the background and it was impossible to see it. I researched in the forum and I used this code in particular: 

<script>
Y.on('domready', function(){
 Y.one("#siteHeader img").setAttribute("src","https://static1.squarespace.com/static/whitelogo.png");
});
</script>

I found the code in this thread, and I followed the steps explained. 

It worked perfectly, at least on the Control Panel's preview, but when I open my site on any browser or device the logos do not load correctly, sometimes loads white over withe background or black over black. I can solve this problem by refreshing the page on the browser, then it works fine. 

I don't know how to fix this issue, and the weird thing is that it only occurs while navigating, never on the Control Panel.

I'm attaching some screenshots so you can see the problem. 

- First two screenshots: (first is the preview from the website, second from control panel).

- On the next two: (same issue but on another page from my website, one being on the website itself and the other one on the control pane.

- Last screenshot: (issue fixed after refreshing).

Thank you so much beforehand!

BTW. Sorry for my English, I'm not a native speaker.

HI AACvisuals

I guess the issue is caused by the YUI library that some time load correctly and some time not, so I can suggest the solution to load the inverted color of the logo on individual page.

You can inject this snippet where you want to invert the color of the logo, note that the solution only work with white/black logo only

<style>
.site-branding h1 img {
    filter: invert(1);
}
</style>

Add it in Pages->Hover on Page name and click Gear icon->Advanced

Hi bangank36

First af all, thank ou for your reply.

Unfortunately, I've tried using your request but i'm coming across the same problem. I have to refresh the ewbiste in order to see the logo properly.

I don't know what else to try, it really bothers me. If you know something else I could try it would be of so much help.

Thank you again

P.S.

In adition to the problem itself, once I refresh the website to see the logo in its correct color, for example in black over a white background, if I go back to another page where the logo should be white, it appears iinverted in color.

I don't understand

P.S.2

I've changed the logo in the desing page to the black version and tried to use your code to invert the color on the pages where has to appear white. But, to my surprise, when I enter the contact page, (one of the pages with a white background), the logo appears white and there's no code written. I mean, there should be no problem in that page, because the page should be reading the uploaded logo, but instead it changes...