Navigation Menu Customizer

The complete navigation styling suite for Squarespace. Dropdowns, mobile menu, active states, transparent header, typography — all in one tool.

Why this matters

Your navigation is the first thing visitors interact with. Squarespace’s built-in options cover the basics, but real brand differentiation requires fine-tuned dropdowns, polished active states, transparent overlays on hero sections, and a mobile menu that feels custom. This tool generates all the CSS you need — no developer required.

/* ═══ Navigation Menu Customizer ═══ */

/* ── Nav Link Typography ── */
.header-nav-list a,
.header-nav-item a {
  letter-spacing: 1px;
  font-size: 14px;
  transition: color 0.2s ease;
}

/* ── Dropdown Menu ── */
.header-nav-folder-content,
.header-menu-nav-folder-content {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.header-nav-folder-item:hover .header-nav-folder-content,
.header-nav-folder-item.header-nav-folder-item--active .header-nav-folder-content {
  opacity: 1;
  visibility: visible;
}

.header-nav-folder-content a,
.header-menu-nav-folder-content a {
  color: #333333 !important;
  padding: 12px 20px;
  transition: background 0.15s ease;
}
.header-nav-folder-content a:hover,
.header-menu-nav-folder-content a:hover {
  background: rgba(0,0,0,0.04);
}

/* ── Active Page Indicator ── */
.header-nav-item--active > a {
  position: relative;
}
.header-nav-item--active > a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: #000000;
}

/* ── Mobile Menu ── */
.header-menu {
  background: #ffffff !important;
}
.header-menu-cta a,
.header-menu .header-menu-nav-item a {
  color: #000000 !important;
}

How to add this to Squarespace

1. Copy the generated CSS above.
2. Go to Design → Custom CSS.
3. Paste the CSS at the bottom of the editor.
4. Click Save. Your navigation updates instantly across the site.