Скачать или смотреть 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 :)