How to Move a Section Above the Site Header in Squarespace 7.1 (Complete Guide)
Every so often, you want a section (like an announcement bar / promo banner / hero strip) to display above the site header. Unfortunately, Squarespace 7.1 doesn’t currently offer a native method to add sections above the header area.
The good news?
With a little clean CSS, along with a bit of JavaScript, you can move a section above the header without breaking any navigation, layout or performance effects.
Why Move a Section Above the Header?
This layout technique is commonly used to:
Display announcements or alerts
Add promotional banners
Highlight limited-time offers
Create stacked hero layouts
Add utility or info bars
It’s especially useful when you need visibility before navigation, without rebuilding the header itself.
Why Squarespace Doesn’t Allow This by Default
Squarespace 7.1 layouts are:
Section-based and linear
Restricted to page flow order
Header-isolated from page sections
Not designed for negative stacking
Because of this, sections cannot naturally exist above the header without custom handling.
What This Solution Will Do
By following this guide, your site will:
Physically move the first section above the header
Keep the header fully clickable
Work with sticky headers
Apply only on desktop (optional)
Remain SEO- and performance-safe
Step 1: Decide Which Section Moves Above the Header
This method moves the first section on the page above the header.
Best use cases:
Announcement bar
Promo strip
Thin hero or utility section
👉 Tip: Keep this section short in height for best UX.
Step 2: Add the Required CSS
Go to:
Website → Pages → Custom Code → Custom CSS
Add the following:
@media screen and (min-width: 768px) {
body.homepage header#header {
position: sticky !important;
transform: unset !important;
}
body.homepage div#siteWrapper > section {
padding: 0 !important;
z-index: 999999 !important;
}
}
What this CSS does
Ensures the header remains sticky
Prevents transform conflicts
Removes unwanted spacing
Keeps proper stacking order
Applies only on desktop screens
Step 3: Move the Section Above the Header Using JavaScript
Squarespace does not allow structural reordering with CSS alone, so we use JavaScript to move the section in the DOM.
Add this to:
Website → Pages → Custom Code → Code Injection → Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
$('body.homepage article > section:first-child')
.insertBefore('body.homepage header#header');
});
</script>
What this JavaScript does
Targets the homepage only
Selects the first section
Moves it above the header element
Keeps everything editable in the Squarespace editor
This is the cleanest and most reliable method for true above-header placement.
Common Mistakes to Avoid
Using position: absolute globally
Forgetting z-index stacking
Pulling large sections above the header
Applying this to multiple sections
Not testing sticky header behavior
Final Thoughts
tput Squarespace 7.1 doesn’t permit sections above the header out of the box, although this CSS + JavaScript method creates a neat and professional looking alternative solution. When you use it right, it enables you to build announcement bars, promo strips or any kind of advanced hero section—without compromising site structure and performance.
FAQ: Move Section Above Header in Squarespace 7.1
-
Yes visually, but structurally it’s handled via JavaScript.
-
Yes. The CSS ensures proper behavior.
-
Yes, for true DOM reordering.
-
No. Content remains readable and indexed.
-
Yes. Uses stable selectors and minimal logic.
