Squarespace gives you a handful of font, color, and layout options for your navigation menu. That covers maybe 20% of what most site owners actually want to do. The other 80%—dropdown animations, active page indicators, transparent headers on specific pages, mobile menu styling—requires custom CSS.
The challenge is that Squarespace's navigation selectors are deeply nested and not intuitive. This guide covers the most common customizations with the exact CSS selectors you need.
Dropdown Menu Styling
The default Squarespace dropdown menus are functional but bland. They use the same background color as your header, have minimal padding, and no visual separation between items. Here are the selectors you need to completely restyle them.
/* Dropdown container */
.header-menu-nav-folder-content {
background: #ffffff !important;
border: 1px solid #e5e5e5;
border-radius: 8px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
padding: 8px 0 !important;
min-width: 200px;
}
/* Individual dropdown items */
.header-menu-nav-folder-content a {
padding: 10px 20px !important;
font-size: 14px !important;
transition: background 0.15s ease;
}
/* Hover state */
.header-menu-nav-folder-content a:hover {
background: #f5f5f5 !important;
}The .header-menu-nav-folder-content selector targets the dropdown panel itself. The subtle box shadow and border radius give it a modern floating card appearance that looks more polished than the default flat dropdown.
Active Page Indicators
Squarespace adds an .header-menu-nav-item--activeclass to the current page's navigation link, but the default styling is barely noticeable. Most designers want a clear underline, bold weight, or color change to show the visitor where they are.
/* Active page - underline indicator */
.header-menu-nav-item--active > a {
color: #000000 !important;
position: relative;
}
.header-menu-nav-item--active > a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
right: 0;
height: 2px;
background: #dc2626;
border-radius: 1px;
}
/* All nav links - subtle hover */
.header-menu-nav-item > a:hover {
opacity: 0.7;
transition: opacity 0.2s ease;
}The ::after pseudo-element creates a colored underline beneath the active link. This is cleaner than using border-bottom because you can control the offset and width independently.
Transparent Header on Specific Pages
A transparent header over a hero image looks great on your homepage but terrible on your blog index. Squarespace's built-in transparent header option is all-or-nothing. To make it per-page, you need to target the page-specific body class.
Every Squarespace page gets a unique class on the body element based on its URL slug. Your homepage is usually .collection-type-page with an ID-based class.
/* Transparent header on homepage only */
body.homepage .header-inner {
background: transparent !important;
position: absolute;
width: 100%;
z-index: 999;
}
/* White nav links over dark hero */
body.homepage .header-menu-nav-item a,
body.homepage .header-title a {
color: #ffffff !important;
}
/* Revert to solid header on scroll */
body.homepage .header-inner.shrink {
background: #ffffff !important;
}
body.homepage .header-inner.shrink a {
color: #000000 !important;
}Replace .homepage with whatever class Squarespace assigns to your page. You can find it by right-clicking the page, selecting Inspect, and looking at the bodyelement's class list.
Mobile Hamburger Menu
The mobile menu in Squarespace 7.1 uses the .header-burger class for the hamburger icon and .header-menu for the mobile nav panel. Common requests include changing the hamburger color, adjusting the mobile menu background, and controlling the slide-in animation.
/* Hamburger icon color */
.header-burger svg line {
stroke: #000000 !important;
}
/* Mobile menu panel */
.header-menu {
background: #1a1a1a !important;
}
/* Mobile menu links */
.header-menu-nav-item a {
color: #ffffff !important;
font-size: 20px !important;
padding: 12px 0 !important;
}
/* Mobile menu link dividers */
.header-menu-nav-item {
border-bottom: 1px solid rgba(255,255,255,0.1);
}Getting all of these selectors right, ensuring they don't conflict with desktop styles, and handling the transition states between mobile and desktop is where most people run into trouble. Our navigation customizer generates the complete CSS based on your design choices and handles the responsive breakpoints automatically.
Navigation is the first thing visitors interact with and the last thing they use before converting. Getting it right is worth the CSS effort, or you can skip the trial-and-error and generate production-ready code in seconds.
