Jump to content

Transparent Navigation Bar for 7.1 --> suddenly stopped working

Recommended Posts

Site URL: https://www.zealoustravelco.com

UPDATE ---> SOLVED
 
Hi!
Can anyone help me with my transparent header (w/ blur effect) that suddenly stopped working? Here is the CSS that worked until I randomly checked website today:

/*FROSTED GLASS NAVIGATION BAR*/
body:not(.tweak-transparent-header) .dark .header-announcement-bar-wrapper {
    background-color: rgba(0,0,0,.2)!important;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    padding-top: 8px;
    padding-bottom: 6px;
    transition: background-color .15s ease;
.header-title-logo img {
    transition: max-height .15s ease;
}
}
 
www.zealoustravelco.com
Edited by ZealousTravel
solved
Link to comment

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.

Link to comment

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

Link to comment
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.

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

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

 

Edited by bkorda
Solution found
Link to comment
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?

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

@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

Link to comment

@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?

 

Link to comment
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!

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.