How do I make the header transparent in Squarespace?

A transparent header overlays your first page section instead of sitting above it. In Squarespace 7.1, set the background to transparent and position it absolutely so it doesn't push content down.

You'll also want to make sure your nav links are visible against the first section's background. Set an explicit color on the nav text, and consider adding a background on scroll for readability.

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