A menu that feels
like your site.

Check the built-in options first

On version 7.1, navigation fonts have their own assignment in Site Styles. Open Fonts, then Assign styles and Site navigation. Use the header editor for link spacing and layout. A standard change in size, weight, or spacing does not need a plugin. Squarespace navigation settings.

To group pages, add a Dropdown in the Pages panel and move the relevant pages into it. A dropdown is a container for links, not a content page. Squarespace does not support dropdowns nested inside other dropdowns. Keep a broad subject page, such as Services, as a link inside its dropdown when it needs its own introduction. Dropdown setup and limits.

Give your dropdown its own color

The desktop dropdown normally takes its background from the header or its theme. When the dropdown needs a different treatment, this free example gives it a forest background, ivory text, comfortable spacing, and a visible keyboard focus outline. Change the hex colors to match your brand.

/* Squarespace 7.1: desktop dropdown colors and spacing */
#header .header-nav-folder-content {
  background: #243c30 !important;
  border: 1px solid #d5ddcc;
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 12px 28px rgba(23, 42, 32, 0.16);
}
#header .header-nav-folder-content a {
  color: #fffdf7 !important;
  padding: 12px 18px;
  display: block;
}
#header .header-nav-folder-content a:hover,
#header .header-nav-folder-content a:focus-visible {
  background: #365441;
  outline: 2px solid #d5ddcc;
  outline-offset: -2px;
}

This styles an existing desktop dropdown. It does not create menu items, change the mobile overlay, or add a mega menu. The preview above illustrates the colors; your header layout and font remain your own.

Install one change at a time

1. Create the dropdown and its links in Squarespace first. Confirm they work before adding CSS.
2. Copy your current Custom CSS into a backup. Paste this example at the end of the Custom CSS panel, then save.
3. Open the dropdown on a desktop-width preview. Tab to its button, press Enter, and tab through its links. Confirm the focus outline is visible.
4. Check the mobile menu separately. This desktop example should leave its opening, closing, and folder navigation alone.
5. Check the saved page outside the editor on a phone and a computer before relying on it for visitors.

To undo the example, remove only the block you added and save. If you already use the Navigation Menu Customizer, edit its dropdown colors there instead of layering two exports over one another.

Make the current page easy to find

Squarespace 7.1 underlines the active page by default. Its native options do not provide separate active and hover link colors. Keep that useful location cue unless your replacement is equally clear. Native active and hover behavior.

For an isolated hover treatment, try the free Navigation Hover Effect tool. For coordinated active-link, dropdown, and mobile styling, use the customizer below. Inspect the result with your longest page title so the indicator does not crowd its neighbors.

Keep the mobile menu recognizable

The header editor includes mobile menu icon choices. Start there before replacing an icon with custom CSS. More important than its shape: visitors must be able to identify the button, open it, find a page, and close it again. Mobile header controls.

Test with your real page names. Long labels, a header button, and multiple folders can turn an attractive short demo into a cramped menu. Check foreground and background colors in the open state as well as the closed header.

Adjust navigation font size and spacing

Use the native Site navigation font assignment first. Reducing the font until every link fits can make the menu harder to read. Try shorter labels, fewer top-level pages, or grouping related pages before shrinking type. For converting letter spacing between pixels and em, use the free letter-spacing converter.

Remove a link without hiding the page

Move a page out of Main Navigation when it should not appear in the menu. Hiding a link with CSS is fragile: a renamed URL can stop matching, and the mobile menu may use different markup. Removing a menu link does not make the page private or remove it from search results.

Know when you need a different menu structure

A few CSS columns do not create a complete mega menu. They do not add accessible grouping, a mobile layout, keyboard behavior, or support for nested dropdowns. First sketch the actual categories and destination pages. A clear overview page with ordinary dropdowns may solve the problem with less maintenance.

The Navigation Menu Customizer styles existing navigation. It does not build nested menus or replace the native navigation system.

Add search before styling search

CSS cannot create a search field or make a search query work. Build and test the search experience first. A dedicated search page linked from the menu is easier to maintain than inserting an input into the header. Confirm the results are useful before spending time on its appearance.

Breadcrumbs need real links

Text inserted with CSS is not a working breadcrumb trail. A useful trail has actual links and reflects the structure of your content. Keep it separate from the header styling task, especially on collections where the current page changes.

Keep motion optional

Preserve the native opening and closing behavior. If you add a transition, check a reduced-motion setting and confirm a hidden panel cannot still receive keyboard focus. An animation should not delay access to navigation.

Treat scroll-based logo changes separately

Do not depend on an assumed scroll class copied from an old tutorial. A different logo on scroll needs a state that your actual header exposes or a separately maintained script. If the goal is readability, a consistent logo and a suitable header background are simpler to check.

If the menu does not look right