Transparent Navigation Bar for 7.1 --> suddenly stopped working

I'm having a similar issue- I had a "transparent" header, in order to inherit a background image from the first section, but now when it's "fixed" scrolling through the page, it doesn't keep the image background and is actually transparent.

https://collaborativefutures.squarespace.com/

Seeing this too, I believe it's a Squarespace bug!

I'm having a similar problem after custom CSS worked for months. @ChrisSE would you please help with adjusting the code from your tutorial https://schwartz-edmisten.com/blog/frosted-glass-header-effect-in-squarespace-71.

I tweaked the tutorial code by adding ".black-bold" to get it to work w/ a black bold background header. It wouldn't work otherwise:

/* Frosted glass header effect */
body:not(.tweak-transparent-header) .black-bold .header-announcement-bar-wrapper {
  background-color: rgba(0,0,0,.3)!important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

Now the whole glass effect has stopped working and header is black with white type.

Would appreciate your help.

I am having a similar issue, but I used to have my transparent nav bar transparent on only my homepage, and it recently stopped working. Here is the code I was using and an example of a site I used it on:

//transparent header on hp//
.homepage .header-announcement-bar-wrapper {
    background: rgba(0,0,0,0) !important;
}

sienaleigh.com

Same problem here, I used this code in page's header injection, now stopped working. Please @SQUARESPACE, don't randomly change classes. Also, why did the OP label this thread "solved"? It clearly isn't.

<style>
.header-announcement-bar-wrapper {
    background: rgba(0,0,0,0)!important
}
</style>

Best,

Gregor

14 hours ago, Tonmeister said:

Same problem here, I used this code in page's header injection, now stopped working. Please @SQUARESPACE, don't randomly change classes. Also, why did the OP label this thread "solved"? It clearly isn't.

<style>
.header-announcement-bar-wrapper {
    background: rgba(0,0,0,0)!important
}
</style>

Best,

Gregor

Use this code

<style>
  .tweak-fixed-header .header .header-announcement-bar-wrapper {
    background: transparent !important;
}
</style>

The SS does not change the class for the header. There are some !Important CSS, and your CSS has a lower priority than them, so your CSS will not work.

This seemed to have fixed mine:

<style>
  body[data-menu-overlay-theme-switcher="true"]:not(.tweak-transparent-header) .header.black {
    background-color: rgba(0,0,0,0)!important;
}
</style>

Hope it helps anyone.

Im really lost on this, i've tried all code mentioned above but none work on my site. 

Are there any other possible solutions?

Here is my site: https://cambridge-exam-services.com/

UPDATE: FIXED

@tuanphan you are awesome, found one of your other posts here and tried that code 🙂

It is a little glitchy when the page loads though, does anyone know if that something that can be fixed?

  header#header {
    position: absolute !important;
    background: transparent;
}

https://forum.squarespace.com/topic/171560-making-navigation-bar-transparent-on-only-one-page/#comment-401596

12 hours ago, bkorda said:

Im really lost on this, i've tried all code mentioned above but none work on my site. 

Are there any other possible solutions?

Here is my site: https://cambridge-exam-services.com/

 

UPDATE: FIXED

@tuanphan you are awesome, found one of your other posts here and tried that code 🙂

It is a little glitchy when the page loads though, does anyone know if that something that can be fixed?

  header#header {
    position: absolute !important;
    background: transparent;
}

 

https://forum.squarespace.com/topic/171560-making-navigation-bar-transparent-on-only-one-page/#comment-401596

 

What problem? Can you describe in detail?

@tuanphan Of course, my apologies for not being very specific. I have a black menu header background set for most pages on site. I am using this code to have a transparent header only for certain pages.

When these pages load they first display the black header for a split second and then become transparent. I've looked in a few browsers and the problem only occurs in chrome.

Not the biggest issue in the world but it would be interesting to understand why this might happen, why it seems to be browser specific and if there is a fix.

Many thanks

@ChrisSE Thank you for posting the code fix on your Frosted Glass Header Effect in Squarespace 7.1 tutorial. Here's Chris' fix for y'all:

/* Frosted glass header effect */
 #header {
  background-color: transparent;
}
.header-announcement-bar-wrapper {
  background-color: rgba(0,0,0,.5)!important;
}

@tuanphan Hey! I had used your code from a previous post to get my fixed header to become 80% transparent on scroll back but today I noticed it is 80% transparent when at the top of the page, and opaque white on scrollback.

The code that was previously working was:

.tweak-transparent-header:not(.header--menu-open) .header-announcement-bar-wrapper {
    background: rgba(255, 255, 255, 0.8) !important;
}

my site is: www.brittanysabatini.com

Can you help me out please?

On 10/14/2020 at 1:41 PM, kherzog said:

@ChrisSE Thank you for posting the code fix on your Frosted Glass Header Effect in Squarespace 7.1 tutorial. Here's Chris' fix for y'all:

/* Frosted glass header effect */
 #header {
  background-color: transparent;
}
.header-announcement-bar-wrapper {
  background-color: rgba(0,0,0,.5)!important;
}

You are welcome! Squarespace keeps making changes so I am trying to keep up as best I can!