Squarespace Custom Navigation

Squarespace Navigation Structure

Main Navigation

The main navigation contains the pages that appear in your site's primary menu - typically your most important pages like Home, About, Services, Portfolio, Blog, and Contact. Manage these in the Pages panel by dragging pages into the Main Navigation section. The order you set here determines the order in the menu.

Dropdown Menus

Create dropdown submenus by dragging a page slightly to the right under another page in the Pages panel. The indented page becomes a child item that appears in a dropdown when visitors hover over (desktop) or tap (mobile) the parent item. Use dropdowns sparingly - deep menu hierarchies with multiple levels of dropdowns are hard to navigate on mobile devices.

Not Linked Section

Pages in the Not Linked section exist on your site with their own URLs but do not appear in the navigation menu. Use this for landing pages, thank-you pages, and campaign-specific content that visitors should access via direct link rather than through the menu.

Secondary Navigation and Footer

Some Squarespace templates support secondary navigation sections. These appear as additional menu areas - often in the header or as a separate bar below the main navigation. Footer navigation is configured separately and typically contains pages like Privacy Policy, Terms of Service, FAQ, and Sitemap.

Customizing Navigation Appearance

Header Layout Options

Go to the header settings in your Squarespace editor (click the header area, then click the pencil icon). Squarespace 7.1 offers multiple header layouts: logo left with navigation right, centered logo with split navigation, logo left with navigation left, and more. Choose the layout that matches your brand's visual style and provides the best readability for your menu items.

Navigation Font and Color

Configure navigation typography and colors in Design > Site Styles. You can set the font family, size, weight, letter spacing, and text transform (uppercase, lowercase, capitalize) for menu items. Set different colors for normal state, hover state, and active state (the current page). Consistent, readable navigation typography is essential. For typography strategies, our Squarespace design tips guide covers font pairing and readability.

Transparent and Solid Headers

Some Squarespace templates support transparent headers that overlay the page content (common for hero sections with background images). Configure this in the header settings. Transparent headers create a more immersive visual experience but require careful attention to text contrast - menu items must remain readable against the background content.

Sticky Navigation

Enable sticky navigation in the header settings to keep the menu visible as visitors scroll down the page. Sticky navigation improves usability on long pages because visitors can always access the menu without scrolling back to the top. Most Squarespace 7.1 templates support this feature natively.

Advanced Navigation Customization with CSS

Custom Menu Item Styling

Use Custom CSS to style individual menu items differently from the rest. For example, you can make your "Contact" menu item look like a button by adding a background color, padding, and border radius to its specific selector. Target the last menu item using .header-nav-item:last-child a and apply button-like styles.

Custom Dropdown Styling

Override the default dropdown appearance with CSS. You can change the dropdown background color, add borders or shadows, adjust the width, and modify the hover state. Target dropdown containers with selectors like .header-nav-folder-content and customize to match your brand. For a complete CSS walkthrough, our guide to adding custom CSS to Squarespace covers navigation-specific selectors.

Custom Mobile Navigation

The mobile hamburger menu has its own set of CSS selectors. You can customize the mobile menu overlay background, text size, spacing between items, and the hamburger icon itself. Use CSS media queries to apply styles only at mobile breakpoints so your desktop navigation remains unchanged. For mobile optimization strategies, our guide to Squarespace mobile optimization covers responsive navigation in detail.

Adding Social Media Icons to Navigation

Squarespace lets you add social media links to the header through the Social Links panel (Settings > Social Links). Once configured, these appear as icons in your navigation area. You can control their position and size through the header settings. For custom icon styling, use CSS to target the social link elements and adjust size, color, and hover effects.

Adding Custom Links to Navigation

External Links

Add external links (to other websites, social profiles, or web apps) to your navigation by clicking the plus icon in the Pages panel and selecting Link. Enter the external URL and a display name. Toggle "Open in New Window" for external links so visitors do not leave your site.

Anchor Links for Same-Page Navigation

Add anchor links to your navigation for one-page websites or long scrolling pages. Create a Link item in the Pages panel and enter the anchor URL in the format /#section-slug. When clicked, the page scrolls to the specified section. For a complete anchor link setup guide, our article on linking to sections in Squarespace covers the full process.

CTA Buttons in Navigation

Some Squarespace 7.1 templates include a dedicated button slot in the header. Enable it in the header settings and configure the button text, link, and style. If your template does not include a native header button, use Custom CSS to style a regular menu item as a button - add background color, padding, and border radius to make it visually distinct from other navigation items.

Navigation Best Practices

Limit main navigation to five or six items. Too many choices causes decision paralysis. Keep the menu focused on your most important pages and use the footer or internal links for everything else.

Use clear, descriptive labels. "Services" is better than "What We Offer." "Portfolio" is better than "Our Work." "Contact" is better than "Get in Touch." Clarity always wins over creativity in navigation.

Put your most important CTA last. The last item in a navigation menu gets disproportionate attention because of the serial position effect. Place your primary conversion action (Contact, Book Now, Shop) in the last position.

Test navigation on mobile. Desktop navigation collapses into a hamburger menu on mobile. Open the mobile menu, check that all items are readable and tappable, and verify that dropdown submenus work correctly with touch interactions. For SEO implications of site structure, our Squarespace SEO guide covers internal linking and navigation hierarchy.

Build Navigation That Guides Visitors to Action

Your Squarespace navigation is the roadmap that tells visitors where they can go and what they can do on your site. A well-customized navigation menu is clear, focused, and visually consistent with your brand - it gets visitors to the right page without friction and keeps your most important action always within reach.

Start with a clean structure in the Pages panel, configure the header layout and styling, and use Custom CSS for the finishing touches. Test on mobile, keep the menu lean, and put your primary CTA where it gets the most attention.