Start with Squarespace's built-in header and navigation styles for fonts, spacing, and layout. Use custom CSS when you need finer control, such as a distinct active-link indicator or a coordinated dropdown treatment.
The challenge is that Squarespace's navigation selectors are deeply nested and not intuitive. This guide explains common Squarespace 7.1 patterns. Back up your existing CSS and inspect your published header before changing selectors; template markup and earlier customizations can affect the result.
Only changing the font or overall header layout? Try Squarespace's navigation settings first. The examples below are for details that need CSS.
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-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-nav-folder-content a {
padding: 10px 20px !important;
font-size: 14px !important;
transition: background 0.15s ease;
}
/* Hover state */
.header-nav-folder-content a:hover {
background: #f5f5f5 !important;
}The .header-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-nav-item--active class 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-nav-item--active > a {
color: #000000 !important;
position: relative;
}
.header-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-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 needs readable links over the first section. Check the built-in header color and adaptive options first. If you need a CSS override for one page, scope it to that page's body ID so it does not affect the rest of the site.
Inspect the published page to find the unique ID on its body element. Use an ID selector such as #collection-YOUR-PAGE-ID, replacing the placeholder with your actual ID.
/* Replace YOUR-PAGE-ID with the suffix from your body ID. */
#collection-YOUR-PAGE-ID #header .header-background {
background: transparent !important;
}
#collection-YOUR-PAGE-ID #header .header-nav-item a,
#collection-YOUR-PAGE-ID #header .header-title a {
color: #ffffff !important;
}Test every link against the image behind it. A color change on scroll also needs a scroll state or script; CSS alone does not create that state.
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 .top-bun,
.header-burger .patty,
.header-burger .bottom-bun {
background: #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 lets you preview dropdown colors, typography, active states, and a mobile-menu color treatment. It generates CSS from those settings. Test that output against your own header before publishing.
Before publishing, open the mobile menu, visit a folder, tab through desktop navigation, and check the active-page indicator. If you only need one effect, use the matching snippet. For a coordinated treatment, the customizer offers a free preview and $11.99 personal-use code export.
