A sticky header stays visible as users scroll, keeping navigation always accessible. Use position: sticky on the header element — it's simpler than fixed positioning because it doesn't require offset adjustments.
Add a subtle shadow when the header becomes sticky to visually separate it from the page content. The .header--scroll class that Squarespace adds can be used for scroll-state styling.
#header {
position: sticky !important;
top: 0 !important;
z-index: 999 !important;
transition: box-shadow 0.3s ease, padding 0.3s ease;
}
/* Add shadow when scrolled */
#header.header--scroll {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}
/* Shrink header on scroll */
#header.header--scroll .header-inner {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
#header.header--scroll .header-title-logo img {
max-height: 35px !important;
transition: max-height 0.3s ease;
}Build a sticky header with our Sticky Header toolTry it free →
