Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Styling navigation

Your site's navigation is a set of links that direct visitors to your site content. Navigation typically displays at the top of your site, although some templates support navigation in a footer or sidebar.

All templates include Site Styles options for changing the font, color, and size of your navigation's links, and many templates support additional options. This guide explains how to customize your navigation.

nav-links.png

These steps are for version 7.0. If your site's on version 7.1, visit Version 7.1 style and design options for help.

Before you begin

Find the Site Styles navigation tweaks

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

  • To open Site Styles from the Home Menu, click Design, then 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 links in the site preview on the right. When blue highlighting boxes appear around them, click any navigation link. This helps filter out tweaks that don't affect the 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:

thorne_site_styles.gif

Change the font and size

To change the font of your navigation menus, click the v icon next to your tweak names to open its drop-down menu. You can see this in the image below (your tweak name may be different).

navigation_font_options.jpg

From here, you can change:

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

For more help, visit Changing fonts.

Change the color

To change the link colors, click a color tweak. Choose a new color by clicking a color at the top of the selector, then selecting a shade within the square. You can also enter a specific value in the text box. For more help, visit Changing colors.

Tip: In some templates, there are additional colors that can display when a visitor hovers over or clicks a link.

Change the position

In some templates, you can change the position of the links. For example, you could move them from the center to the left.

In Site Styles, look for tweaks called Navigation Position, Navigation Alignment, or something similar. To see what positions are available in your template, see the Navigation display by template table below.

Here's an example of how this might look in Site Styles:

five_-_navigation_style_options.jpg

Tip: In the Brine family, look for the Header: Primary Navigation and Header: Secondary Navigation sections.

Change spacing between and around links

To change the space around navigation links, look for tweaks in Site Styles that adjust your header, banner, or navigation. While the tweaks vary by template, link spacing tweaks typically include words like these:

  • Padding
  • Spacing
  • Width

Here's an example of how these options might look in Site Styles:

avenue_sizes_and_values.jpg

Active and hover options

In some templates, there are additional options for navigation links depending on whether they've been clicked (their "state" or "phase"). While the tweaks vary by template, look for these words:

  • Hover - The link changes when a visitor hovers over it.
  • Active - When a visitor visits a page in your navigation, its link changes style.

For help with your template, visit its template guide or list of Site Styles tweaks.

Tip: External navigation links won't show active styles, even if they link to a page on your site.

Mobile navigation

In most templates, navigation menus collapse behind a menu icon when viewed on a mobile device. This helps with usability and keeps your site mobile-friendly.

In many cases, mobile navigation inherits styles from the desktop site. This helps keep your branding consistent. Some templates have advanced mobile style options, which give you a finer degree of control. To see your site's mobile style options, see your template's Structure and style guide.

To explore which tweaks affect your mobile navigation, open your navigation in smartphone view before opening Site Styles. This way you can see the changes as you make them.

  1. Switch the Device View to smartphone.
  2. Click the navigation link (usually a ☰) so your mobile navigation appears.
  3. From the Home Menu, click Design, then Site Styles. The mobile navigation will remain open.
Note: 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.

Fixed navigation

Fixed or “sticky” navigation stays in the same position at the top of the browser while you scroll down the page. This is supported in some templates.

Navigation display by template

Most mobile devices hide site navigation behind a menu icon or link. Larger mobile devices, such as tablets, may display the desktop styles. To learn more, visit Navigation menu icons.

Here's how the Main Navigation displays in these template families:

Template Layout

Adirondack

Horizontal, top center

Avenue

Horizontal, top left/center/right

Aviator

Vertical, top left (Business Card/Offset); or horizontal, top center (Poster)

Bedford

Horizontal, top right

Brine

Horizontal, top left/center/right, can be hidden

In the Pages Panel, it's called the Primary Navigation.

Farro

Horizontal, top left/center/right, can be hidden 

Five

Vertical, in sidebar (Top Navigation Position: None); or horizontal top left/center/right (Above Banner, Below Banner)

Flatiron

Horizontal, top left

Forte

Horizontal, top right

Galapagos

Horizontal, top center

Ishimoto

Horizontal, top left/center/right

Momentum

Horizontal, in the navigation bar

Montauk

Horizontal, top left/center/right

Native

Horizontal, top center

Pacific

Horizontal, top center, can be split around site title.

Skye

Vertical, within an overlay

Supply

Vertical, left sidebar

Tremont

Horizontal, top left/right

Wells

Vertical, left sidebar

Wexley

Horizontal, top left/center/right

York

Horizontal, top left/center/right, can be hidden

Was this article helpful?
54 out of 266 found this helpful