How to Edit Navigation Bar in Squarespace

How to Edit Navigation Bar Structure

Adding Pages to Navigation

Go to the Pages panel in your Squarespace dashboard. You will see sections: Main Navigation, Secondary Navigation (on some templates), and Not Linked. Pages in the Main Navigation section appear in your navigation bar. To add a page, click the plus icon in the Main Navigation section and create a new page, or drag an existing page from Not Linked into Main Navigation.

Removing Pages from Navigation

To remove a page from the navigation bar without deleting it, drag it from Main Navigation to the Not Linked section. The page still exists on your site with its own URL - it just does not appear in the menu. This is useful for landing pages, thank-you pages, and campaign-specific content.

Reordering Navigation Items

Click and drag pages within the Main Navigation section to change their order. The order in the Pages panel is the exact order they appear in your navigation bar. Put your most important pages first and your primary call-to-action (Contact, Book Now, Shop) last - visitors remember and click the first and last items most.

Creating Dropdown Menus

Drag a page slightly to the right under another page in the Pages panel. The indented page becomes a dropdown child item. When visitors hover over the parent item on desktop (or tap on mobile), the dropdown appears. Use dropdowns for grouping related subpages - like individual service pages under a "Services" parent. For deeper navigation customization, our guide to Squarespace custom navigation covers advanced menu structures and CSS styling.

Adding External Links

Click the plus icon in the Pages panel and select Link. Enter an external URL (another website, a social profile, or a web app) and a display name. Toggle "Open in New Window" for external links so visitors do not leave your site.

How to Edit Navigation Bar Appearance

Header Layout

Click on the header area in the page editor, then click the pencil icon to open header settings. Squarespace 7.1 offers multiple header layouts - logo left with navigation right, centered logo with split navigation, logo left with navigation left, and others. Choose the layout that best fits your brand and provides clear readability for your menu items.

Navigation Font and Size

Configure navigation typography in Design > Site Styles. You can set the font family, size, weight, letter spacing, and text transform (uppercase, lowercase, capitalize) for navigation items. Keep navigation text readable - 14 to 16 pixels is a good range. Very small or very decorative fonts make navigation hard to use.

Navigation Colors

Set navigation link colors in Site Styles - normal state, hover state, and active state (the currently viewed page). The active state helps visitors understand where they are on your site. Ensure sufficient contrast between navigation text and the header background for readability.

Transparent vs. Solid Header

Some templates support transparent headers that overlay the page content below - commonly used with hero section background images. Configure this in the header settings. Transparent headers look dramatic but require careful attention to text contrast against varying background content.

Sticky Navigation

Enable sticky navigation in the header settings to keep the navigation bar visible as visitors scroll. This is especially valuable on long pages - visitors can always access the menu without scrolling back to the top. Most 7.1 templates support sticky headers natively.

How to Edit Navigation Bar with Custom CSS

Making a Menu Item Look Like a Button

Style the last navigation item as a CTA button by adding background color, padding, and border radius: .header-nav-item:last-child a { background-color: #333; color: #fff !important; padding: 10px 20px; border-radius: 4px; }

Changing Dropdown Styling

Override the default dropdown appearance - background color, borders, shadows, and spacing: .header-nav-folder-content { background-color: #ffffff; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: 4px; }

Adjusting Navigation Spacing

Change the gap between navigation items: .header-nav-item { margin: 0 20px; } Increase for more spacious navigation, decrease for a compact menu. For CSS implementation, our guide to adding custom CSS to Squarespace covers navigation-specific selectors.

Mobile Navigation Customization

The mobile hamburger menu has its own CSS selectors. Customize the mobile menu overlay background, text size, spacing, and the hamburger icon itself using media queries: @media screen and (max-width: 768px) { .header-menu-nav-list a { font-size: 20px; padding: 12px 0; } }

Navigation Bar Best Practices

Limit to five or six items. More than six main navigation items creates decision paralysis. Move secondary pages to the footer or into dropdown submenus.

Use clear, descriptive labels. "Services" is clearer than "What We Do." "Contact" is clearer than "Get in Touch." Navigation labels should describe the destination, not sound creative.

Put your CTA last. The last navigation item gets disproportionate attention. Place your primary conversion action (Contact, Book, Shop) in the last position and style it as a button for visual emphasis.

Test on mobile. Desktop navigation collapses into a hamburger menu on mobile. Open the mobile menu, verify all items are readable and tappable, and check that dropdowns work with touch interactions. For mobile-specific optimization, our guide to Squarespace mobile optimization covers responsive navigation.

Keep dropdown menus shallow. One level of dropdowns works well. Two or more levels become difficult to navigate on mobile and confusing on desktop. If you need deep hierarchy, consider a mega menu approach with a dedicated page instead. For broader design strategies, our Squarespace design tips guide covers navigation hierarchy and visual flow.

Common Navigation Editing Mistakes

Too many items in the main menu. Eight or more items makes visitors less likely to click any of them. Consolidate related pages into dropdown groups.

Unclear or clever labels. "Our Journey" instead of "About" or "Solutions" instead of "Services" adds cognitive load. Visitors should instantly understand each menu item.

Missing CTA in navigation. If your most important action (Contact, Book, Buy) is buried in the footer or only on one page, you are missing conversions. Add it to the navigation and style it as a button.

Not testing after changes. Navigation changes can have unexpected effects - especially on mobile. Always preview your site on desktop and mobile after editing the navigation bar. For SEO implications of navigation structure, our Squarespace SEO guide covers internal linking and site architecture.

Build a Navigation Bar That Works

Your Squarespace navigation bar is the roadmap visitors use to explore your site. Keep it focused, clearly labeled, and visually consistent with your brand. Edit the structure in the Pages panel, configure the appearance in header settings and Site Styles, and use Custom CSS for the finishing touches.

Test on mobile after every change, keep the menu lean, and put your most important action where visitors will see it. A well-edited navigation bar does not just organize your pages - it guides visitors toward the actions that matter most to your business.