Jump to content

Problems with logo's display on website

Recommended Posts

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: 

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


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.

desde web.jpg

desde panel.jpg

desde web 2.jpg

desde panel 2.jpg

desde web 2 al refrescar.jpg

Edited by AACvisuals
Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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


.site-branding h1 img {
    filter: invert(1);

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



Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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



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



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...

nuevo contacto.jpg

nuevo contacto 2.jpg

logo negro.jpg

Edited by AACvisuals
Adding information
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.