Transparent Header on Scroll in Squarespace

Описание: Learn how to make your solid Squarespace header fade to transparent as you scroll down your site using simple custom CSS. This step-by-step Squarespace tutorial walks you through adding a smooth scroll effect to your navigation bar for a modern, professional look. Perfect for beginners who want to customize their Squarespace website design with an easy CSS trick.

——————

🔗 Original post:
https://ajmexperience.com/learn-posts...

🎥 Subscribe for more Squarespace CSS Hacks and tips:
   / @ajmexperience  

📸 Follow us on Instagram:
  / ajmexperience  

💡 For more Squarespace tips to enhance your website designs, check out the rest of the learn series:
https://ajmexperience.com/learn

✉️ Sign up for our newsletter for updates, freebies, insights and more:
https://www.ajmexperience.com/newslet...

🖥️ Save hours of wireframing and mobile optimization with our Layout Templates:
https://www.ajmexperience.com/squares...

📖 Get our free CSS Selector Cheat Sheet:
https://www.ajmexperience.com/css-che...

📚 Get our full CSS Library:
https://www.ajmexperience.com/squares...

——————

Here’s the CSS:

#header {
background-color: rgba(255,255,255,1);
transition: background-color 200ms ease-in-out; }
#header.shrink {
background-color: rgba(255,255,255,0.7); }

——————

New to Squarespace?
We love it and we think you will too! Use our code PARTNER10 for 10% off!

Try Squarespace ⇨ https://squarespace.syuh.net/c/496021...
Join Squarespace Circle ⇨ https://squarespacecircleus.pxf.io/c/...

New to my channel?
🖥 AJM Experience is a marketplace and learning space for Squarespace designers & CSS nerds: https://www.ajmexperience.com/

Thanks so much for watching! I'm Amanda 👋 and I am a Squarespace website designer and CSS nerd. I've launched over 200 Squarespace sites (and still actively design for clients every day!), but there's nothing I love more than sharing my knowledge with the rest of the Squarespace community :)

If you learned something from this video, here's the best way to show your appreciation:
📹 Subscribe to my channel ⇨    / @ajmexperience  
☕️ Buy me a coffee ⇨ https://www.buymeacoffee.com/ilyajm

——————

Our Favorite Tools:
✨ ElfSight ⇨ https://go.elfsight.io/click?pid=1575...
💻 AJM Squarespace CSS Library ⇨ https://www.ajmexperience.com/squares...
📐 Squarespace Layout Templates ⇨ https://www.ajmexperience.com/squares...
👻 Ghost Squarespace Plugins ⇨ https://ghostplugins.peachs.co/a/ajme...
🧩 SQSP Themes Plugins ⇨ https://transactions.sendowl.com/stor...
🌐 Squarespace ⇨ https://squarespace.syuh.net/c/496021...

——————

This article contains affiliate links. Whenever you buy something through one of these, I get a small commission, without any extra cost to you :)