Skip to content
Paid Tool

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.

Nav Link Typography

Font Size: 14px

Letter Spacing: 1px

Text Transform

Dropdown Menu

Background

#ffffff

Text Color

#333333

Item Padding: 12px

Animation

Active Page Indicator

Active Color

#000000

Mobile Menu

Hamburger Icon

Menu Background

#ffffff

Text / Close Color

#000000

Transparent Header

Live Preview

YourBrand

Mobile Menu Preview

HomeAboutServicesBlog
Design > Custom CSS
/* ═══ 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.

A little over your head?

No shame — this stuff is hard. Let the pros handle it.

Long Drive MarketingTalk to Long Drive Marketing →