Sticky Header Customizer
Make your Squarespace header react to scroll. Shrink it, change its color, add shadows, or hide it entirely — then bring it back when visitors scroll up.
Controls
<style>
/* Sticky Header Styles */
header.header {
position: fixed !important;
top: 0;
left: 0;
right: 0;
z-index: 9999;
transition: all 300ms ease !important;
height: 80px;
background: transparent !important;
color: #000000;
}
header.header * {
transition: color 300ms ease, font-size 300ms ease;
}
header.header.sq-scrolled {
background: #ffffff !important;
color: #000000;
height: 60px;
box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}
header.header.sq-scrolled * {
color: #000000 !important;
}
header.header.sq-hidden {
transform: translateY(-100%);
}
</style>
<script>
(function() {
var header = document.querySelector('header.header') || document.querySelector('header');
if (!header) return;
var scrollThreshold = 50;
var lastScroll = 0;
window.addEventListener('scroll', function() {
var currentScroll = window.pageYOffset || document.documentElement.scrollTop;
// Add/remove scrolled class
if (currentScroll > scrollThreshold) {
header.classList.add('sq-scrolled');
} else {
header.classList.remove('sq-scrolled');
}
// Hide on scroll down, show on scroll up
if (currentScroll > lastScroll && currentScroll > 80) {
header.classList.add('sq-hidden');
} else {
header.classList.remove('sq-hidden');
}
lastScroll = currentScroll <= 0 ? 0 : currentScroll;
}, { passive: true });
})();
</script>Why this matters
Reclaim screen space
A header that hides on scroll-down gives readers 60-80px more content viewport. On mobile, that's a significant chunk of screen real estate.
Visual refinement
A transparent hero header that solidifies on scroll is a signature move of premium sites. It says 'someone designed this' without being loud about it.
Squarespace-native targeting
The generated CSS targets Squarespace's .header class directly. No workarounds, no !important abuse — just clean overrides that work with the platform.
How to add this to Squarespace
Copy the generated code above.
Go to Settings → Advanced → Code Injection in your Squarespace dashboard.
Paste the entire code block into the Footer section.
The CSS targets header.header — Squarespace's default header class. If your template uses a different selector, adjust accordingly.
Save and preview. Scroll up and down on any page to see the effect.
A little over your head?
No shame — this stuff is hard. Let the pros handle it.
