Every Squarespace Header CSS Customization

The header is the first thing visitors see on every page of your Squarespace site. Whether you want to hide it, make it transparent, shrink it on scroll, or restyle it entirely — all of it is possible with CSS. This guide covers 13 header customizations for Squarespace 7.1, with copy-paste code for each one. Every snippet goes into your Custom CSS panel (Design → Custom CSS) unless noted otherwise. Developer Mode users can place the same CSS in their site stylesheet.

1. Hide Header on a Specific Page

Landing pages, sales funnels, and single-purpose pages often perform better without site navigation. Removing the header eliminates distractions and keeps visitors focused on one call to action. Squarespace doesn't offer a built-in toggle for this, but CSS handles it cleanly.

Every page in Squarespace 7.1 gets a unique collection ID on the body element. You can find this by right-clicking the page, choosing "Inspect," and looking at the body class list for something like .collection-681a2b3c4d5e6f7a8b9c0d1e. Scope your hiding rule to that class so the header disappears on that page only while staying visible everywhere else.

You also need to collapse the top padding that Squarespace adds for the header's height. Without that reset, you'll have a blank gap at the top of your page where the header used to be.

/* Replace with your page's collection ID */
.collection-681a2b3c4d5e6f7a8b9c0d1e {
  #header {
    display: none !important;
  }

  /* Remove the top spacing the header normally occupies */
  .content-wrapper {
    padding-top: 0 !important;
  }
}

Result: The header completely disappears on the target page. All other pages remain unaffected. The first section of the page moves up to fill the space the header occupied.

2. Change Header Background Color

Squarespace 7.1 uses a theme-based color system where the header color is inherited from your site's color palette. If you want a color that falls outside your template's palette options — or you want a specific hex value — CSS gives you full control.

The primary selector is #header. If your header is currently set to transparent in the site styles, Squarespace applies an inline style that takes priority, so you'll need !important to override it. You can also use rgba values to create semi-transparent backgrounds that let the first section bleed through slightly.

For the mobile menu open state, target #header.header--menu-open separately. This ensures the background stays consistent when the hamburger menu is expanded on smaller screens.

#header {
  background-color: #1a1a2e !important;
}

/* For a semi-transparent header */
#header.header--menu-open {
  background-color: rgba(26, 26, 46, 0.95) !important;
}

Result: The header background changes to a deep navy (#1a1a2e). When the mobile menu opens, it uses a 95% opaque version of the same color so the page content is barely visible behind it.

3. Make Header Transparent

A transparent header overlays your first page section instead of sitting above it. This is a popular design pattern for hero images, full-screen videos, and visually dramatic landing pages. The header floats on top of the content and the first section extends all the way to the top of the viewport.

The key is switching the header from its default static/relative position to position: absolute. This pulls it out of the normal document flow so it no longer pushes your content down. You also need z-index to keep it above the hero content.

The tricky part is readability. If your hero image is light, white nav text will be invisible. Consider adding a background color on scroll using the .header--scroll class that Squarespace applies automatically when the user scrolls past the hero.

#header {
  background-color: transparent !important;
  position: absolute !important;
  width: 100%;
  z-index: 999;
}

/* Add background when user scrolls */
#header.header--scroll {
  background-color: rgba(0, 0, 0, 0.85) !important;
  position: fixed !important;
}

/* Ensure nav links are visible */
#header .header-nav-item a {
  color: #ffffff !important;
}

Result: The header is fully transparent and floats over the first section. When the user scrolls, it transitions to a dark semi-transparent background and fixes to the top of the viewport. Navigation links are white in both states.

4. Reduce Header Height

A bulky header wastes valuable above-the-fold real estate. Reducing the header height lets visitors see more of your content immediately, especially on laptops with smaller screens. The height is controlled by vertical padding on the inner wrapper and the logo image size.

Target #header .header-inner for the padding and #header .header-title-logo imgfor the logo. Adjust both proportionally — shrinking the padding without scaling the logo can make it look cramped, and vice versa.

Accessibility matters here: mobile tap targets should remain at least 44px tall. Use a separate media query for mobile to keep things usable on smaller screens, even if you go slimmer on desktop.

#header .header-inner {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Reduce logo size proportionally */
#header .header-title-logo img {
  max-height: 40px !important;
}

/* Compact the mobile header too */
@media screen and (max-width: 767px) {
  #header .header-inner {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

Result: The header shrinks to roughly half its default height. The logo scales down to 40px max height. On mobile, the padding is even tighter for a compact navigation bar that maximizes screen space.

5. Hide Header on Mobile

Certain page types work better without a mobile header. Linktree-style pages, app-like experiences, and single-purpose landing pages can feel cleaner without the hamburger menu cluttering the top of the screen. A CSS media query makes this straightforward.

The standard breakpoint for Squarespace 7.1 mobile is 767px. Anything below this width triggers the mobile header layout. Wrapping your hiding rules in @media screen and (max-width: 767px) ensures the desktop header remains fully functional.

Remember that removing the header on mobile also removes all navigation. Make sure your page has alternative navigation methods — anchor links, a footer menu, or inline buttons — so mobile visitors can still move through your site.

@media screen and (max-width: 767px) {
  #header {
    display: none !important;
  }

  .content-wrapper {
    padding-top: 0 !important;
  }
}

Result: The header is completely hidden on screens narrower than 768px. Desktop visitors see the full header as normal. The top padding collapses so the page content starts at the very top of the mobile viewport.

6. Center the Logo

A centered logo creates a symmetrical, balanced header layout that works especially well for fashion, luxury, and editorial brands. Squarespace 7.1 offers some centered layout presets, but they don't always position the logo exactly where you want it — especially when navigation items are uneven on each side.

The approach uses absolute positioning to pull the logo out of the flex flow and pin it to the horizontal center. The left: 50% combined with transform: translateX(-50%) technique centers any element regardless of its width. Meanwhile, the navigation items stay in their normal positions on either side.

If you're using a text site title instead of a logo image, the same CSS applies — .header-title wraps both the text title and the logo image, so targeting it covers both cases.

#header .header-inner {
  display: flex !important;
  justify-content: center !important;
  position: relative;
}

#header .header-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Keep nav items in their normal positions */
#header .header-nav {
  position: relative;
  z-index: 1;
}

Result: The logo sits dead center in the header regardless of how many navigation items appear on each side. Nav links remain in their original positions and stay clickable above the centered logo.

7. Add Sticky/Fixed Header

A sticky header stays visible as visitors scroll, keeping your navigation and brand always accessible. This is one of the most requested Squarespace customizations because the default scroll behavior on many 7.1 templates lets the header scroll away. With position: sticky, the header locks to the top of the viewport the moment it reaches the edge.

Using sticky instead of fixedis the modern approach. Sticky positioning doesn't pull the element out of the document flow, which means you don't need to add padding to compensate for the header height. It just works.

Adding a subtle box shadow on scroll creates a visual separation between the header and the content below it. The .header--scroll class that Squarespace applies when the user scrolls past a threshold is perfect for this. You can also shrink the header padding on scroll to reclaim vertical space.

#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;
}

Result:The header sticks to the top of the viewport on scroll. A soft shadow appears to lift it off the page content. The header padding and logo shrink for a compact look that doesn't dominate the screen.

8. Add Background Image to Header

A background image on the header can create a striking first impression — think a textured pattern, a brand photograph, or a gradient image that ties the header into the hero section below. Squarespace doesn't expose this option in the visual editor, but CSS handles it with one property.

Set background-image on #header and use background-size: cover with background-position: center so the image fills the header proportionally. The tricky part is keeping your navigation text readable against the image — a semi-transparent dark overlay using the ::before pseudo-element solves this.

Upload your image to a Squarespace page first to get a CDN-hosted URL, or use any externally hosted image. The ::before overlay sits between the background image and the nav content, so the text stays crisp.

#header {
  background-image: url('YOUR_IMAGE_URL') !important;
  background-size: cover;
  background-position: center;
  position: relative;
}

/* Dark overlay for text readability */
#header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 0;
}

/* Keep nav content above overlay */
#header .header-inner {
  position: relative;
  z-index: 1;
}

Result: The header displays your chosen image as a full-bleed background. A 40% black overlay ensures all navigation text remains legible. The nav links and logo sit above the overlay layer.

9. Fix Announcement Bar Gap

If you use Squarespace's announcement bar, you've probably noticed the unwanted gap between the bar and the header. This is one of the most common Squarespace complaints — a visible strip of background color between the announcement bar and the main navigation that makes the top of your site look disconnected.

The gap comes from default margin and padding on two elements: .header-announcement-bar-wrapper (the announcement bar container) and .header (the main header). Squarespace applies spacing to both, and the combined margins create the visible gap. Resetting both to zero collapses it completely.

The adjacent sibling selector (+) targets the header specifically when it immediately follows the announcement bar, removing any border that might also contribute to the visual separation.

.header-announcement-bar-wrapper {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.header-announcement-bar-wrapper + .header {
  border-top: none;
}

Result: The announcement bar and header sit flush against each other with zero gap. The top of your site looks like one continuous element instead of two disconnected bars.

10. Change Logo Size on Scroll

A logo that starts large and shrinks as the user scrolls is a polished design touch common on premium websites. It gives the header a commanding presence at the top of the page and then compacts itself to stay out of the way as visitors browse your content. This is purely CSS — no JavaScript needed.

Squarespace 7.1 adds a .shrink class to the header element when the sticky header detects scroll movement. You can target this class to transition the logo to a smaller max-height. The CSS transition property handles the smooth animation between the two sizes.

Match the header padding reduction to the logo shrink for a proportional feel. If the padding stays large while the logo shrinks, the header looks empty. If the logo stays large while padding shrinks, it looks cramped.

.header .header-title-logo img {
  max-height: 80px;
  transition: max-height 0.3s ease;
}
.header.shrink .header-title-logo img {
  max-height: 45px;
}
.header {
  transition: padding 0.3s ease;
}
.header.shrink {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

Result: The logo starts at 80px tall and smoothly animates down to 45px when the user scrolls. The header padding compresses simultaneously, creating a cohesive shrinking effect.

11. Different Header Per Page

Not every page needs the same header treatment. A transparent header looks great over a dramatic homepage hero but is unreadable on a text-heavy services page. Per-page header styling lets you tailor the header's appearance to each page's design, giving you the flexibility of a fully custom site within Squarespace.

Every Squarespace 7.1 page adds a unique class to the body element based on the collection ID, formatted as .collection-XXXX. Find this by inspecting the body tag on the target page. Scope your header CSS to that class and it only applies on that page.

This technique is the foundation of most advanced Squarespace customizations. You can use it for transparent headers on the homepage, dark headers on a specific inner page, hidden headers on landing pages, or any combination you need.

/* Transparent header on homepage only */
body.collection-YOUR_HOME_ID .header {
  background: transparent !important;
  position: absolute;
  width: 100%;
  z-index: 999;
}
body.collection-YOUR_HOME_ID .header .header-title-text a,
body.collection-YOUR_HOME_ID .header .header-nav-item a {
  color: #fff !important;
}
/* Dark header on a specific inner page */
body.collection-YOUR_PAGE_ID .header {
  background: #111 !important;
}
body.collection-YOUR_PAGE_ID .header .header-nav-item a {
  color: #fff !important;
}

Result: The homepage gets a fully transparent header with white text overlaying the hero. The specified inner page gets a dark (#111) header with white nav links. Every other page uses the default header style unchanged.

12. Add CTA Button to Header

A bold call-to-action button in the header drives conversions on every page of your site. Squarespace 7.1 lets you mark a nav item as a "button" in the design panel, but the default styling is often too subtle — it barely looks different from the other nav links. CSS lets you make it unmissable.

The most common approach targets .header-nav-item:last-child a, which styles the last navigation link as a button. This works as long as your CTA (like "Get Started" or "Book Now") is the last item in your navigation list. If it's not, move it to the last position in the Squarespace navigation editor.

Add padding, a background color that contrasts with your header, border-radius for rounded corners, and uppercase text. A hover state that darkens the color gives the button a tactile, interactive feel.

.header-nav-item:last-child a {
  background: #e74c3c;
  color: #fff !important;
  padding: 10px 24px !important;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 13px;
  transition: background 0.2s ease;
}
.header-nav-item:last-child a:hover {
  background: #c0392b;
}

Result: The last navigation item becomes a bold red button that stands out from the rest of the navigation. It darkens on hover and uses uppercase text with wide letter-spacing for maximum visual punch.

13. Add Social Icons to Header

Squarespace 7.1 can display social media icons in the header through Settings → Social Links, but the default styling is minimal — small icons with no hover effects. CSS lets you resize them, change their color, adjust spacing, and add interactive hover transitions.

The icons live inside .header-actions-action--social. Each icon is an inline SVG wrapped in .sqs-svg-icon--social. SVGs respond to the fill CSS property for color changes, and you can resize them by targeting the svgelement directly or the wrapper's width and height.

A hover color transition adds interactivity that the default icons lack. Change the fill color on hover and add a transition for a smooth color shift. Adjust the wrapper margin to control spacing between icons.

.header-actions-action--social .sqs-svg-icon--wrapper {
  width: 32px;
  height: 32px;
  margin: 0 4px;
}
.header-actions-action--social .sqs-svg-icon--social {
  fill: #333;
  transition: fill 0.2s ease;
}
.header-actions-action--social .sqs-svg-icon--social:hover {
  fill: #e74c3c;
}
.header-actions-action--social svg {
  width: 18px;
  height: 18px;
}

Result: Social icons in the header are larger (32px wrapper, 18px icon), use a dark gray default color, and transition to red on hover. The 4px margin between icons provides comfortable spacing without crowding.

Related Tools