A sticky header keeps your navigation visible at all times, so visitors never have to scroll back to the top to navigate your site. It is one of the most requested Squarespace customizations — and for good reason. Sites with sticky headers see better engagement because navigation is always one click away.

Some Squarespace templates have a built-in sticky header toggle. But if yours does not, or if you want advanced behaviors like shrink-on-scroll or hide/show, this guide has you covered.

Try our Sticky Header GeneratorTry it free →

Method 1: Basic Sticky Header (CSS Only)

The simplest approach. Add this to Design → Custom CSS:

/* Basic sticky header */
header#header {
  position: sticky !important;
  position: -webkit-sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  background: #fff !important;
  transition: box-shadow 0.3s ease;
}

/* Add shadow when scrolled */
header#header.is-scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

To add the shadow on scroll, paste this in Settings → Advanced → Code Injection → Footer:

<script>
  window.addEventListener('scroll', function() {
    var header = document.querySelector('header#header');
    if (header) {
      if (window.scrollY > 10) {
        header.classList.add('is-scrolled');
      } else {
        header.classList.remove('is-scrolled');
      }
    }
  });
</script>

Note: Squarespace's header element ID varies by template. If header#header does not work, try inspecting your site and finding the correct selector. Common alternatives include .header or [data-nc="header"].

Method 2: Shrink on Scroll

This popular effect shows a full-size header at the top of the page, then shrinks it down as the user scrolls. It keeps the navigation accessible while giving more screen space to content.

/* Shrinking sticky header */
header#header {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  background: #fff !important;
  transition: all 0.3s ease;
}

/* Compact state when scrolled */
header#header.is-compact {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

header#header.is-compact .header-title-logo img {
  max-height: 40px !important;
  transition: max-height 0.3s ease;
}

header#header .header-title-logo img {
  max-height: 60px;
  transition: max-height 0.3s ease;
}

<script>
  window.addEventListener('scroll', function() {
    var header = document.querySelector('header#header');
    if (header) {
      if (window.scrollY > 80) {
        header.classList.add('is-compact');
      } else {
        header.classList.remove('is-compact');
      }
    }
  });
</script>

Method 3: Hide on Scroll Down, Show on Scroll Up

This is the most sophisticated behavior. The header hides when scrolling down (giving full screen space to content) and slides back in when scrolling up (when the user is likely looking for navigation).

/* Hide/show header */
header#header {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  background: #fff !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

header#header.is-hidden {
  transform: translateY(-100%);
}

header#header.is-visible {
  transform: translateY(0);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

<script>
  (function() {
    var lastScroll = 0;
    var header = document.querySelector('header#header');

    window.addEventListener('scroll', function() {
      var currentScroll = window.scrollY;

      if (currentScroll <= 0) {
        header.classList.remove('is-hidden');
        header.classList.remove('is-visible');
        return;
      }

      if (currentScroll > lastScroll && currentScroll > 80) {
        // Scrolling down
        header.classList.add('is-hidden');
        header.classList.remove('is-visible');
      } else {
        // Scrolling up
        header.classList.remove('is-hidden');
        header.classList.add('is-visible');
      }

      lastScroll = currentScroll;
    });
  })();
</script>

Method 4: Transparent Header at Top

Want a header that is transparent over your hero image and becomes solid when you scroll? This looks stunning on sites with full-width hero sections.

/* Transparent to solid header */
header#header {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  background: transparent !important;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

header#header.is-solid {
  background: #fff !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

/* Make nav links white on transparent background */
header#header:not(.is-solid) .header-nav-list a {
  color: #fff !important;
}

header#header:not(.is-solid) .header-title-text a {
  color: #fff !important;
}

Use the same scroll detection script from Method 1, replacing is-scrolled with is-solid.

Troubleshooting Common Issues

Content jumps when header becomes fixed. Add padding-top to the body equal to your header height. Use sticky instead of fixed to avoid this entirely.
Mobile menu is behind the header. Increase the z-index on your mobile menu to be higher than the header.
Announcement bar pushes the header down. Target the announcement bar with position: sticky; top: 0 as well, then set the header to top: [announcement-bar-height].

Our Sticky Header tool generates all of this code for you — just pick a behavior, customize colors and timing, and paste it into your site. The CSS Cheat Sheet also has quick-reference sticky header snippets.