How can I make my Site Header background Transparent again?

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

Best,

Faiz

It probably changed because of a theme change.

Add the following CSS.

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

  background-color: transparent;
  
  }

Hi Creedon many thanks I appreciate the code you sent.

I tried to add but noticed that the white background still appears in my header on scroll. Please do check the video here: 

Is there anything else I can try?

Many thanks!

Best,

Faiz

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!

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?

Best.

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?

Best.

Have you solved yet?

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,

Best,

Faiz

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?