Styling navigation

Navigation link styles are primarily set by your site's header. In the header editor, you can change:

• The navigation layout
• The navigation colors
• The navigation link spacing
• The padding around text
• If the navigation is fixed
• How the navigation looks on computers versus mobile devices

You can also use options in site styles to change fonts and sizes. To learn more, review the sections below.

Every template family has its own site styles, so there isn't one single rule for how to update your navigation links. Use these tips to find the style options your template supports:

• To open site styles, open the Design panel, then click Site styles.
• Scroll through the tweaks on the left and look for related tweaks. The tweaks usually include the word Navigation.
• You can also hover over your site's navigation in the site preview on the right. When a blue highlighter box appears around it, click any navigation link. This helps filter out tweaks that don't affect navigation links. When you're done, click Show all to go back to the main view.

Here’s an example of what this looks like in the Thorne template, which is part of the Brine family:

By default, your navigation font matches your site-wide font. To set a different font type or size for your navigation:

1. While editing a page, click the paintbrush icon, then click Fonts.
2. Under Global text styles, click Assign styles.
3. Click Site navigation.
4. To change the font, click Style, then choose Custom. Choose a new font family, weight, style, and other details. Click Save to apply your changes.
5. To change the size, click Size, then choose a preset Paragraph size, or choose Custom. To set a custom size, use the slider or manually enter a new rem value. Click Save to apply your changes.

Tip: To learn how version 7.1 uses rem values for font sizes, visit Changing fonts.

To change your navigation font, click the v icon next to the tweak name to open its drop-down menu. From here, you can change:

• Font names
• Style
• Size
• Line height
• The spacing between letters

For more help, visit Changing fonts.

You can also change the color theme of your mobile header overlay.

To change the navigation link colors, click a color tweak in site styles. Choose a new color by clicking a color at the top of the selector, then selecting a shade in the square. You can also enter a specific value in the text field. For more help, visit Changing colors or your site's template guide.

To change the position and spacing of your navigation links, edit how your site's header appears on computers. You can also customize the look and placement of the menu icon on mobile devices.

In some templates, you can change the position of the links. In site styles, look for tweaks called Navigation position, Navigation alignment, or something similar. To learn the positions available in your template, review the table below.

Tip: Some templates support fixed, or "sticky" navigation, that stays in the same position at the top of the browser while you scroll down the page.

Navigation display by template

Your site's navigation layout depends on your site's template, and displays differently on mobile devices. Larger mobile devices, such as tablets, may display the computer styles.

Here's how the main navigation displays on computers in these template families:

Change link spacing

To change the space around navigation links, look for tweaks in site styles that change your header, banner, or navigation. While the tweaks vary by template, link spacing tweaks typically include words like Padding, Spacing, or Width.

To style your mobile navigation, edit your site's header. In the header editor, click the Mobile icon to set mobile-specific styles, including the layout and type of menu icon.

Keep in mind:

• Header buttons always appear with the navigation links behind the Menu link or ☰ icon.
• It's not possible to change the mobile navigation font size.
• It's not possible to make the menu icon always appear on a computer.
• To remove the menu icon from your header, ensure all of your pages are in the Not linked section, and disable all header elements, except for the shopping cart. Enabling the cart will not make the menu icon appear.

In many cases, mobile navigation inherits styles from the computer display to keep your branding consistent. Some templates have advanced mobile style options, which give you a finer degree of control. To learn more, visit your template's guide.

To explore which tweaks affect your mobile navigation, open your navigation in phone view before opening site styles:

1. Switch the device view to phone.
2. Click the navigation link (usually a ☰) so your mobile navigation appears.
3. In the Home menu, click Website, click Design, then click Site styles. The mobile navigation will remain open.

Tip: If you can’t see your navigation on mobile, ensure that you haven’t set your background or header color to the same color as your navigation text. The links may display over this color on mobile.

Menu icon or link design by template

Here's how the ☰ icon or Menu link displays in these template families:

Empty mobile navigation icons

In some templates, the icon always appears on mobile, even if all your pages are in the Not linked section.

You can hide the menu icon in these template families:

• Brine family
• Farro family

Open the Design panel, then click Site styles. Scroll to the Mobile: menu icon section and set the Menu icon position tweak to Hide.

In these template families, there isn't a built-in way to hide the mobile navigation icon:

• Bedford
• Forte
• Galapagos
• Montauk
• Wells
• York

Tip: You can hide the mobile navigation icon by adding custom code. To learn more, visit this post in the Squarespace Forum.

Keep in mind, custom code modifications fall outside the scope of our support. This means we’re unable to help you set up or troubleshoot code-based solutions.