Jump to content

How to make header blurred / frosted effect?

Recommended Posts

  • Replies 6
  • Views 374
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

If you have the header color set to solid you can change the color, opacity, and blur effect.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
5 minutes ago, Ziggy said:

If you have the header color set to solid you can change the color, opacity, and blur effect.

Hello,
The header background is transparent, however we use this feature :image.png.9c45178a45aa17fc66f5a5bdfee2c759.png
Which fades in a black background to the header after the first section.
How do we edit this black background with or without code?
Check biobuilds.com for an example

Link to comment

You can try this Custom CSS:

[data-header-style="dynamic"].header {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
29 minutes ago, Ziggy said:

You can try this Custom CSS:

[data-header-style="dynamic"].header {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

 

Thanks, that is great, however now the bar is always blurry (including on the hero which looks weird), is there a way to make it so only when the background fades in the blur fades in as well?image.thumb.png.3cc886417f717176a977bf6266cbac01.png

Link to comment

Add this additionally:

body.tweak-transparent-header .header:not(.shrink):not(.transparent-header-theme--override) {
    backdrop-filter: blur(0px) !important;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
2 minutes ago, Ziggy said:

Add this additionally:

body.tweak-transparent-header .header:not(.shrink):not(.transparent-header-theme--override) {
    backdrop-filter: blur(0px) !important;
}

 

Wow, thank you so much!
Finally, the last issue I see is that on mobile it seems like the menu doesn't appear anymore after adding the code, any idea why?

image.thumb.png.459f93cef0c1ee88a4cd073550c8497a.png

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.