Custom Navigation in Squarespace 7.1: Beyond the Default Options

Education

7 Oct

The standard Squarespace navigation is fine. It works. People can click through to your client's pages. But fine doesn't win you projects. Fine doesn't make your portfolio look like the work of someone who understands web design.

The good news: Squarespace 7.1 gives you real hooks to build navigation that actually looks premium. No weird hacks. No cobbling together workarounds. Just solid CSS that plays nicely with the platform.

Why the Default Navigation Falls Short

Out of the box, Squarespace's navigation is functional but visually limited. The standard menu sits in a predictable location, the colours are locked to your site-wide palette, and the hover states are flat. Folder dropdowns have fixed widths that never quite fit your longest menu labels. The mobile hamburger menu looks like every other Squarespace site built in the last five years.

For a professional site (yours or your client's), that's not enough.

Transparent Headers and Scroll Effects

One of the most effective navigation customisations is making the header transparent on page load, then adding a background colour as the user scrolls. This creates visual breathing room above the fold and signals a modern, intentional design approach.

Here's the basic pattern. Add this to your CSS injection:

.header {
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.header.scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Then add this JavaScript to your Code Injection header:

<script>
window.addEventListener('scroll', function() {
  const header = document.querySelector('.header');
  if (window.scrollY > 100) {
    header.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
  }
});
</script>

This adds the .scrolled class when the user scrolls past 100 pixels, triggering the background colour and subtle shadow. The transition property makes it smooth. Adjust the scrollY value (100px) based on your hero section height.

Making Sticky Headers Work Properly

A sticky header is standard now, and Squarespace makes it easy. But sticky headers create navigation problems elsewhere on your site, particularly with anchor links that get covered by the header. We'll cover that properly later.

To make the header sticky:

.header {
  position: sticky;
  top: 0;
  z-index: 999;
}

Simple enough. The z-index matters here. Squarespace uses high z-index values for various elements, so 999 ensures your header sits on top of everything except modals.

Styling Navigation Items and Dropdown Menus

The main navigation wrapper in Squarespace 7.1 uses the class .header-nav-wrapper. Individual menu items use .header-menu-nav-item. Dropdowns (folders in Squarespace terminology) use .header-nav-folder-content.

Here's how to style the main navigation items with custom spacing and font properties:

.header-nav-wrapper {
  gap: 30px;
}

.header-menu-nav-item a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.header-menu-nav-item a:hover {
  color: #c41e3a;
}

For dropdown menus, you need to target the folder container specifically:

.header-nav-folder-content {
  background-color: white;
  border: 1px solid #e0e0e0;
  padding: 15px 0;
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.header-nav-folder-content a {
  padding: 12px 20px;
  display: block;
  font-size: 13px;
  color: #333;
  transition: background-color 0.2s ease;
}

.header-nav-folder-content a:hover {
  background-color: #f5f5f5;
}

This creates a clean dropdown with proper spacing, a subtle border, and a light hover background. The min-width ensures it doesn't collapse on shorter menu labels.

The Folder Dropdown Width Problem

Every Squarespace designer hits this: folder dropdowns have a default width that's either too narrow or too wide for your menu items. The content gets cut off, or the dropdown is needlessly wide.

The culprit is usually an inherited width property. Target it directly:

.header-nav-folder-content {
  width: auto !important;
  white-space: nowrap;
}

.header-nav-folder-content a {
  padding-left: 25px;
  padding-right: 25px;
}

The !important declaration is necessary here because Squarespace applies inline styles. The white-space: nowrap ensures text doesn't wrap inside dropdown items. Adjust your padding values to match your design system.

Mobile Hamburger Menu Customisation

The mobile menu toggle button uses the class .header-menu-button. You can style the hamburger icon itself:

.header-menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.header-menu-button::before {
  content: '';
  width: 24px;
  height: 16px;
  background: linear-gradient(to bottom, currentColor 0%, currentColor 15%, transparent 15%, transparent 40%, currentColor 40%, currentColor 55%, transparent 55%, transparent 80%, currentColor 80%);
  background-repeat: no-repeat;
  background-size: 24px 16px;
}

This creates a proper hamburger icon using a linear gradient. It automatically inherits your menu text colour via currentColor, so it stays cohesive with your colour scheme.

For the mobile menu itself, which appears below the header:

.header-menu {
  background-color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.header-menu-nav-item {
  border-bottom: 1px solid #e0e0e0;
}

.header-menu-nav-item a {
  padding: 16px 20px;
  display: block;
}

This creates a clean, stacked mobile menu with subtle borders between items.

Adding a CTA Button to Navigation

Many designers want a prominent "Get In Touch" or "Book a Call" button in the header, separate from the standard menu items. Squarespace doesn't have a native option for this, but you can repurpose a menu item and style it differently.

Create your last menu item as "Contact" or whatever you want, then style it as a button:

.header-menu-nav-item:last-child a {
  background-color: #c41e3a;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.header-menu-nav-item:last-child a:hover {
  background-color: #a01729;
}

This works well, but remember it still functions as a regular menu link. If you need it to behave differently (like open a modal or launch a calendar), you'll need custom JavaScript or a third-party tool.

Hover Effects Worth Using

Subtle hover effects build perceived quality. Here's a pattern that works across most navigation styles:

.header-menu-nav-item a {
  position: relative;
  transition: color 0.2s ease;
}

.header-menu-nav-item a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #c41e3a;
  transition: width 0.3s ease;
}

.header-menu-nav-item a:hover::after {
  width: 100%;
}

This creates an underline that animates from left to right on hover. It's subtle, modern, and adds visual feedback without overwhelming the design.

Testing Across Breakpoints

Navigation customisations can behave differently at different screen sizes. Always test: At mobile widths, make sure dropdown menus don't overflow the viewport. Use media queries to adjust padding and font sizes if needed. Verify the hamburger menu appears at the right breakpoint. Check that any custom buttons maintain proper spacing on small screens.

A quick pattern for responsive adjustments:

@media (max-width: 640px) {
  .header-nav-wrapper {
    gap: 15px;
  }

  .header-menu-nav-item a {
    font-size: 13px;
  }

  .header-nav-folder-content {
    min-width: 160px;
  }
}

Wrapping Up

The default Squarespace navigation works, but it doesn't feel premium. By applying these CSS patterns, you create navigation that feels intentional, responsive, and professional. Transparent headers on scroll, proper dropdown styling, smooth hover effects, and thoughtful mobile menu design separate good work from great work.

Your clients won't consciously notice these details. They'll just feel that your designs look more polished than what their competitors are doing.

That's the whole point.