Gigi-C Posted August 18, 2023 Share Posted August 18, 2023 Hey all! I have a fixed scroll header in place, with the solid style. I would like to basically change that solid opacity on scroll, so once we've scrolled on the page the header stays fixed but the opacity of it changes as to not disrupt the content in the background. Thanks in advance! Link to comment
Ziggy Posted August 18, 2023 Share Posted August 18, 2023 Can you share your website URL? 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! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Gigi-C Posted August 18, 2023 Author Share Posted August 18, 2023 sure https://fox-porcupine-3ldj.squarespace.com/ pass: ybn123 Link to comment
Ziggy Posted August 18, 2023 Share Posted August 18, 2023 If you set the header to dynamic, and then use this Custom CSS: #header { background-color: transparent; } .header-announcement-bar-wrapper { background-color: rgba(255,255,255,.66)!important; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } 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! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Gigi-C Posted August 18, 2023 Author Share Posted August 18, 2023 Hey, thank you for this! Unfortunately it doesn't give me the desired effect. It makes the whole header become a little translucent, even from the top, when I want it to be solid and then on scroll have like a 50% opacity. Also another issue i'm having is that when I change the colour code to the darkest colour on my site rgba(28,28,27,1.000) it just turns into a solid header and the code seems to stop working (so the blur doesn't work etc) Link to comment
Solution Ziggy Posted August 18, 2023 Solution Share Posted August 18, 2023 rgba(28,28,27,1.000) is a solid colour. The last number is 1.0 which means 100% opacity. In the code I gave you it was using 0.66 (66%), try changing that number to this: rgba(28, 28, 27, 0.66) Gigi-C 1 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! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Gigi-C Posted August 18, 2023 Author Share Posted August 18, 2023 Amazing!! That worked! Thank you so much for your help 🙂 Link to comment
FluentStudios Posted March 6 Share Posted March 6 How would you target the header if it's the header bottom? Thanks! In 7.0 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment