Jump to content

How can I make my Site Header background Transparent again?

Recommended Posts

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/

Hello, I recent had a custom code fix which allowed me to make my site header background transparent (original message here: 



I used the code here:

body.tweak-transparent-header:not(.header--menu-open):not([data-menu-overlay-theme-switcher="true"]) .header-announcement-bar-wrapper.dark {
    background-color: transparent !important;

But I notice now it's not working? The white background on the header still appears on scroll. Perhaps I have broken something?

It was working perfectly before.

Please help!

Page = https://bluebird-porcupine-yzdg.squarespace.com/

Site Pword = bluebird



Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

I'm having a similar issue. Custom CSS that's been fine now doesn't work.  Is there a way to get notifications when Squarespace update their code? Does this happen often? It doesn't make one look very good to clients!

Looks you've fixed the prob for your site scholarsayze!

Edited by JoeB
Link to comment
22 hours ago, scholarsayze said:

Absolutely JoeB,

It seems all my custom code has been affected. Whilst I have managed to fix the header/logo issue, all the other custom codes now need additional attention.

Is there a better way to avoid this moving forward?


Have you solved yet?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Thanks Tuanphan,

I tried to use this code from Creedon as above:

body[data-menu-overlay-theme-switcher="true"] .header {

  background-color: transparent;


But I noticed it works well on the live site but in the editor, it was still showing the white background header as you can see here in my video - https://www.youtube.com/watch?v=sx27-wCzlVA&feature=youtu.be


I later then found your post here: https://forum.squarespace.com/topic/151512-transparent-header-on-front-page-only-71/, and your code here:

/* homepage header transparent */
#header {
    background: transparent;

I found this works perfectly both on live site and in the editor.

Is this correct and ok to use this code?

Many thanks,




Link to comment

Also the other issue is that on my home page, directly beneath my header I will be using a black section.

So naturally my logo will need to be white. But in my store, my section beneath will be White, so my logo wont show!

Is there any way to have a White logo on the homepage and any other pages, with a Black logo on my store page? 

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.