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
  • Views 1.1k
  • Created
  • Last Reply

It probably changed because of a theme change.

Add the following CSS.

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

  background-color: transparent;


Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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!

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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


This topic is now archived and is closed to further replies.

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