Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Transparent Navigation Bar for 7.1 --> suddenly stopped working


ZealousTravel

Question

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 post
  • Answers 13
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 he

13 answers to this question

Recommended Posts

  • 0

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/

Link to post
  • 0

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 post
  • 0

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 post
  • 0

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

Link to post
  • 0
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

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.

Link to post
  • 0

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 post
  • 0
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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

@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 post
  • 0

@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 post
  • 0
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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...