Style Your Squarespace Header With a Blur (AKA Frosted Header) | AJM Learn
This one is set up using the “solid” styling option and is probably my favorite way to style a header. Making the header slightly transparent helps it feel much less boxy while still allowing the nav to be easily readable while adding a slight blur elevates the entire page. Everyone loves a frosted header.
Original post:
https://ajmexperience.com/learn-posts...
For more CSS code to enhance your website designs, check out the rest of the learn series:
https://ajmexperience.com/learn
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 BONUS HACK CODE:
To make your header even more dynamic, use this Squarespace header code injection to shrink the logo on scroll.
Tip! Adjust the max height based on what works for your site/logo.
@media only screen and (min-width: 750px) {
#header .header-title-logo img {
transition: max-height 140ms ease-in-out}
#header.shrink {
.header-announcement-bar-wrapper{
padding-top: 10px!important;
padding-bottom: 10px!important;}
.header-title-logo img {
max-height: 80px; }}}
Want to customize your header even more? Here are our favorite header plugins.
Tip! Use code AJMEXPERIENCE for 10% off Ghost Plugins
https://www.ghostplugins.com/products...
https://www.ghostplugins.com/products...
https://www.ghostplugins.com/products...
https://www.ghostplugins.com/products...
——————
AJM EXPERIENCE
🖥 A marketplace for graphic designers, Squarespace lovers, & CSS nerds: https://www.ajmexperience.com/
☕️ Buy me a coffee: https://www.buymeacoffee.com/ilyajm
Thanks for watching and hope you learned something. My name is Amanda Jones McNay and I am a Squarespace web designer and CSS nerd. I have designed well over 100 different Squarespace sites for clients and have used custom CSS code in every one of them. My site is dedicated to helping all CSS designers to perfect their craft and create cool sh!t.
——————
This article contains affiliate links. Whenever you buy something through one of these, I get a small commission, without any extra cost to you :)