Squarespace Navigation CSS — The Complete Guide

Squarespace gives you limited control over your navigation through the design panel. These 10 CSS techniques let you take full control — from dropdown backgrounds and hamburger icons to mega menus and scroll-triggered logo swaps. Every snippet goes in Design → Custom CSS unless noted otherwise.

1. Change Dropdown Background Color

The dropdown folder menus in Squarespace 7.1 use the .header-nav-folder-content selector. By default, the dropdown panel inherits the header background color, which often clashes with the links inside it. Overriding the background on this element gives you full control over the dropdown panel color.

You will likely want to update the dropdown link colors and hover states too, so they remain readable against your new background. The dropdown items use .header-nav-folder-itemas their selector. A subtle hover highlight — like a semi-transparent white overlay — makes the menu feel interactive without overpowering the text.

.header-nav-folder-content {
  background-color: #1a1a2e !important;
}

.header-nav-folder-item a {
  color: #e0e0e0 !important;
}

.header-nav-folder-item a:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

Result: Dropdown menus display a dark navy background with light text. Hovering over an item adds a subtle white overlay for visual feedback. Change the hex values to match your brand palette.

2. Style the Hamburger Menu Icon

The hamburger icon in Squarespace 7.1 is built with the .header-burgerelement, which contains line elements that make up the three bars. You can change their color, thickness, and spacing to match your design. By default these lines are thin and dark — not always ideal on hero images or colored headers.

The icon also has an open state when the mobile menu is active, where the three bars morph into an X. Style both states so the close icon matches your design language too. Keeping the open-state color darker ensures it reads well against the mobile menu overlay background.

/* Hamburger icon lines */
.header-burger .burger-line {
  background-color: #ffffff !important;
  height: 3px !important;
  width: 28px !important;
}

/* Spacing between lines */
.header-burger {
  gap: 6px !important;
}

/* Change color when menu is open */
.header-menu-nav-open .header-burger .burger-line {
  background-color: #333333 !important;
}

Result: The hamburger icon displays as three thick white lines with generous spacing. When the mobile menu opens, the icon color switches to dark gray so it remains visible against the menu overlay.

3. Add Active Page Indicator

Squarespace 7.1 adds a .header-nav-item--activeclass to the current page's nav link. This class is your hook for applying an underline, color shift, or any visual indicator that shows users where they are in your site hierarchy. Without it, visitors rely on the page content alone to understand their location.

An underline offset with a pseudo-element gives a cleaner look than a text-decoration underline. You can control thickness, color, and distance from the text independently. The example below pairs a color change with a positioned underline for maximum clarity.

.header-nav-item--active a {
  color: #e63946 !important;
  position: relative;
}

.header-nav-item--active a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #e63946;
}

Result: The current page's nav link turns red and gains a thin underline 4px below the text. This gives visitors a clear visual cue of which page they're on. Swap #e63946for your brand's accent color.

4. Change Nav Font Size

Navigation link font size is controlled by the .header-nav-item aselector. You can set it to any size, but keep readability and click targets in mind — nav links below 14px get difficult to read and interact with on desktop. Slightly larger sizes (16–18px) tend to feel more modern and confident.

The mobile menu uses entirely different selectors from the desktop navigation, so you need to set its font size separately. Mobile nav links should generally be larger than desktop for easier tap targets — 20px is a good baseline. Use a media query to scope the mobile styles so they only apply on smaller screens.

/* Desktop navigation */
.header-nav-item a {
  font-size: 16px !important;
  letter-spacing: 0.5px;
}

/* Mobile navigation */
@media screen and (max-width: 767px) {
  .header-menu-nav-list a {
    font-size: 20px !important;
  }
}

Result: Desktop nav links render at 16px with subtle letter-spacing for a clean, editorial look. Mobile menu links bump up to 20px for comfortable tap targets. Adjust both values to match your type scale.

5. Hide a Specific Nav Link

You can hide a nav link by targeting its specific hrefattribute with a CSS attribute selector. This is the cleanest method because it uses the link's URL slug directly — it won't break if you reorder pages in the navigation panel. It also survives template switches and page renames as long as the slug stays the same.

The hidden page still exists and is fully accessible by direct URL — this only removes it from the visible navigation. This is perfect for staging pages you're building but aren't ready to show, gated content you link to from email campaigns, or utility pages like a thank-you page that shouldn't appear in the nav.

Remember to hide the link in both the desktop and mobile navigation selectors. They use different class names, so you need two rules.

/* Hide by page URL slug */
.header-nav-item a[href="/hidden-page"] {
  display: none !important;
}

/* Also hide it in the mobile menu */
.header-menu-nav-item a[href="/hidden-page"] {
  display: none !important;
}

Result: The page at /hidden-page disappears from both desktop and mobile navigation. It remains live and accessible via direct link. Replace /hidden-page with your actual page slug.

6. Create Mega Menu Columns

Squarespace 7.1 folder dropdowns render as a single vertical column by default. For sites with a large number of dropdown items — service pages, product categories, resource libraries — this creates an unnecessarily long dropdown that pushes content off screen. You can convert these into a multi-column mega menu by targeting the .header-nav-folder-content container and applying CSS grid.

Set the folder content to a fixed width and use grid-template-columns to create the desired number of columns. The example below creates a three-column layout centered under the parent nav item. This works best when you have six or more dropdown items that can be organized into logical groups.

.header-nav-folder-content {
  width: 600px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 20px !important;
  left: 50%;
  transform: translateX(-50%);
}
.header-nav-folder-item a {
  padding: 8px 16px;
  font-size: 14px;
  white-space: nowrap;
}
.header-nav-folder-item a:hover {
  background: #f5f5f5;
}

Result: The dropdown transforms into a wide, three-column mega menu centered beneath its parent link. Items stack in columns with comfortable padding and a light hover highlight. Adjust the width and column count based on your item count.

7. Nav Search Bar Styling

The Squarespace 7.1 header search is triggered by a search icon in .header-actions-action--search. When clicked, it expands into a full-width or overlay search input using .header-search-form. The default styling is minimal — a plain text input with little visual hierarchy.

Style the expanded search input, its background overlay, and the placeholder text to create a seamless search experience that matches your brand. A large font size with a bottom-border-only input field creates an elegant, editorial look. The near-opaque white background ensures the search overlay covers the page content cleanly.

.header-search-form input[type="text"] {
  font-size: 24px;
  font-weight: 300;
  border: none;
  border-bottom: 2px solid #111;
  padding: 12px 0;
  background: transparent;
  width: 100%;
  color: #111;
}
.header-search-form input[type="text"]::placeholder {
  color: #aaa;
}
.header-search-form {
  background: rgba(255, 255, 255, 0.98);
  padding: 40px;
}

Result: The search overlay displays with a near-white background and a large, elegant input field with a bottom border only. The placeholder text is a soft gray, and the typed text is dark. This creates a focused, premium search experience.

8. Breadcrumb Navigation

Squarespace 7.1 doesn't include breadcrumb navigation by default (except on product pages). Breadcrumbs improve both user experience and SEO by showing visitors their position within the site hierarchy and giving search engines additional structured data about your page relationships.

You can add breadcrumbs manually using a code block with semantic HTML. Place it at the top of your page content and style it to sit flush against the section edge. The HTML below includes an aria-label for accessibility. For SEO, you can add JSON-LD structured data via code injection to surface breadcrumbs in Google search results.

/* Add this HTML via a Code Block:
<nav class="breadcrumbs" aria-label="Breadcrumb">
  <a href="/">Home</a>
  <span class="sep">/</span>
  <a href="/services">Services</a>
  <span class="sep">/</span>
  <span class="current">Web Design</span>
</nav>
*/
.breadcrumbs {
  font-size: 13px;
  color: #888;
  margin-bottom: 20px;
}
.breadcrumbs a {
  color: #888;
  text-decoration: none;
}
.breadcrumbs a:hover { color: #111; }
.breadcrumbs .sep { margin: 0 8px; }
.breadcrumbs .current { color: #333; font-weight: 600; }

Result: A clean breadcrumb trail appears at the top of the page: Home / Services / Web Design. Links are gray with a dark hover state, and the current page is bolded. Update the HTML links to match your actual site structure.

9. Mobile Menu Animation

The Squarespace 7.1 mobile menu uses .header-menuand transitions between hidden and visible states. The default animation is basic — essentially a binary show/hide with little visual flair. A slide-in from the right with staggered item reveals creates a polished, app-like experience that makes the mobile navigation feel intentional.

Target the .header-menu-nav-wrapper and set a starting transform/opacity state, then transition to the visible state when the menu opens. The open state is indicated by the body class .header--menu-open. Adding incremental transition-delay values on each nav item creates a cascade effect where items appear one after another.

.header-menu-nav-wrapper {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              opacity 0.3s ease;
}
.header--menu-open .header-menu-nav-wrapper {
  transform: translateX(0);
  opacity: 1;
}
.header-menu-nav-item {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.header--menu-open .header-menu-nav-item {
  opacity: 1;
  transform: translateY(0);
}
.header--menu-open .header-menu-nav-item:nth-child(1) { transition-delay: 0.1s; }
.header--menu-open .header-menu-nav-item:nth-child(2) { transition-delay: 0.15s; }
.header--menu-open .header-menu-nav-item:nth-child(3) { transition-delay: 0.2s; }
.header--menu-open .header-menu-nav-item:nth-child(4) { transition-delay: 0.25s; }

Result: The mobile menu slides in from the right with a smooth easing curve. Each menu item fades in and rises into position with a staggered delay, creating a cascading reveal effect. Add more :nth-child rules if you have more than four nav items.

10. Logo Swap on Scroll

When you have a transparent header with a white logo over a hero image, the logo becomes invisible against a white sticky header when scrolling. The solution is to use two logo images and toggle visibility with CSS. Upload your alternate logo as a secondary image and use the .header.shrink class (applied on scroll) to swap between them.

This technique requires adding the second logo via header code injection. The alternate logo is hidden by default and positioned absolutely on top of the original. When the header enters its shrunk/sticky state, the original fades out and the alternate fades in. This pairs well with a sticky header script that adds the .shrink class on scroll.

Add the following HTML in Settings → Advanced → Code Injection → Header, replacing the image URL with your dark logo:

/* Add second logo in Header Code Injection:
<img class="alt-logo" src="YOUR_DARK_LOGO_URL" alt="Logo"> */

.alt-logo {
  display: none;
  max-height: 60px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.header.shrink .header-title-logo img {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.header.shrink .alt-logo {
  display: block;
  opacity: 1;
  transition: opacity 0.3s ease;
}

Result: Your white logo displays normally over the hero section. As the visitor scrolls and the header becomes sticky, the white logo fades out and a dark version fades in, keeping the logo visible against the now-white header background.

Related Tools