How to Make Your Squarespace 7.1 Header Transparent, Then Sticky on Scroll

Add a transparent header by targeting the .header element with background-color: transparent, then use a small JavaScript snippet to toggle a .is-sticky class once the user scrolls past 100 pixels.

The Problem

Squarespace 7.1 ships with a solid-color header by default. While the platform offers a “Sticky Header” tweak in some templates, it does not provide a built-in way to start transparent and transition to solid on scroll. Designers often resort to heavy plugins or convoluted workarounds.

The CSS Solution

Drop this into your Custom CSS panel:

.header {
  background-color: transparent !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.header.is-sticky {
  background-color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

The !important flag is necessary because Squarespace’s own stylesheets use it heavily on header backgrounds.

The JavaScript Toggle

Add this to Settings → Advanced → Code Injection → Header:

<script>
  (function() {
    const header = document.querySelector('.header');
    if (!header) return;

    function updateHeader() {
      if (window.scrollY > 100) {
        header.classList.add('is-sticky');
      } else {
        header.classList.remove('is-sticky');
      }
    }

    window.addEventListener('scroll', updateHeader, { passive: true });
    updateHeader();
  })();
</script>

The { passive: true } option keeps scroll performance smooth on mobile.

Common Pitfalls

1. Conflicting built-in tweaks — Disable the native Sticky Header option before adding custom code.
2. Wrong selector — Some older 7.1 templates use .header-announcement-bar-wrapper instead of .header. Inspect your DOM to confirm.
3. Mobile overflow — Test on actual devices. Fixed-position headers can obscure content on iOS Safari if viewport units are used incorrectly.