Move the Header Below the First Section in Squarespace 7.1

Squarespace Tutorial
Written By Walid Hasan

Squarespace 7.1 puts your site’s header (which includes your logo, navigation, and utility links) at the top of the page by default. But what if instead, you want your very first section (ie, a giant hero banner &/or video background) to be positioned above the header?

I'm sure with some custom coding, you're able to get the entire header underneath the first section but keep the sticky nav bar coming afterward once you've scrolled past the top.

Here’s a step-by-step to help you apply this effect like a professional.

What This Will Do

  • Move the entire header (#header) below the first .page-section

  • Sticky header when scrolling up.

  • Clean landing pages or fullscreen banners

  • Desktop Only (you can expand this to mobile if necessary)

Tools You’ll Need

  • A website on Squarespace 7.1 (I would recommend a Business or Commerce plan)

  • Access to Code Injection

  • Basic understanding of Custom CSS

Step 1: Insert JavaScript (Moves Header)

Paste this in:
Settings → Advanced → Code Injection → Footer

Copied!

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const header = document.getElementById('header');
    const firstSection = document.querySelector('.page-section:first-child');
    if (header && firstSection) {
      firstSection.after(header);
    }
  });
</script>

What it does:

  • Wait until the page is fully loaded

  • Moves the #header element directly after the first .page-section

Step 2: Add Custom CSS (Styles the Header)

Paste this in: Pages → Custom code → Custom CSS

Copied!

@media screen and (min-width: 768px) {
  #header {
    position: relative;
    top: 0;
    display: none;
  }
  #header .header-nav-item a{
    color: #000;
  }
  main .page-section:first-child + #header {
    display: block;
  }
  main .page-section:first-child {
    min-height: calc(100vh - 93px) !important;
  }
}

What this CSS does:

Selector Purpose
#header Hides the header initially and sets it to sticky when shown
.page-section:first-child + #header Reveals the header only after the first section
.page-section:first-child Adds minimum height for layout balance


Pro Tips

  • Adjust calc(60vh - 93px) to change how much space your hero section gets.

  • You can remove the @media wrapper if you want the effect on mobile too.

  • Add a background color or shadow to the #header for better visibility.

Use Case Example

This layout is ideal for:

  • Landing pages with full-screen images or videos

  • Portfolios with immersive intros

  • Event websites where visual storytelling comes first

Final Thoughts

Moving the header beneath the first section in Squarespace 7.1 is an easy (and inexpensive) way to level up your web design game, especially if you're in search of a dramatic, immersive landing page experience. Whether you’re featuring a full-screen video, hero image, or lead magnet section, your content gets to shine before the introduction of the site’s navigation!

With some custom JavaScript and CSS, you can do it:

  • Design a minimalist and subtle visual introduction now!

  • Yet you still get full-featured headers and sticky scrolling effects

  • Personalize the experience on desktop and mobile if required

Just be sure to double-check with all the devices, especially if you translate this design to mobile. And of course, always maintain backups of your custom code in case of future updates.

Frequently Asked Questions (FAQ)

1. Why the hell would I put the header under the first section?

To build up a more visual experience, especially when it comes to landing pages, product presentations, portfolios... simply any page where the first impact matters.

2. Will this have any impact on the functionality of the navigation bar?

No. The header will behave as it naturally should - dropdowns, links, and sticky scroll...scrolls - once the user has scrolled past the first section.

3. Can we do this on a mobile device?

This effect is by default only on the desktops. But you can remove the media query from the CSS if it has to work for mobile as well. Test heavily because mobile spacing and a/bility is hella sensitive.

4. What if I want the header to be shown on the scroll?

You can adjust the height of the top margin of the first section by the height value. You can adjust it to make the header appear less or more quickly as the user scrolls with that particular technique.

5. Is this going to interfere with Squarespace’s pre-built design controls?

Not directly. You are using some JavaScript and CSS that are working in tandem with the native structure of Squarespace. However, the custom header behaviors or third-party plugins might need some looking into to prevent any conflict.