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

Your navigation menus link to different pages and direct visitors to your site content. This guide reviews how to customize these menus using tweaks in the Style Editor.

Every template has different style options for navigation menus, but all templates include options for changing their font and color.

Before you begin

Find navigation Style Editor tweaks

The first step to styling your navigation menus is to find the correct style tweaks.

In the Home Menu, click Design, and then click Style Editor.

With the Style Editor open, click the menu you’d like to style.

In the site preview, you’ll see blue outlines highlighting the area. In the Style Editor, you'll only see tweaks that control the navigation menu.

You can also find the navigation tweaks by looking for Navigation labels in the Style Editor.

Style tweaks are grouped differently for each template. You might find navigation tweaks grouped with the area that your navigation menu appears, such as the Header or Footer.

Here’s an example of a template that groups navigation tweaks based on what you need to change:

Change the link font

All templates include tweaks for changing the navigation font. In some templates, you may find these under Typography.

To change the font of your navigation menus, click the drop-down menus that look like the image below. From here, you can change:

  • Font names
  • Style
  • Size
  • Line height
  • Letter spacing

For more help, visit Changing fonts

Change the link colors

You can select the color of navigation links for different states. While the tweaks vary by template, they can include: 

  • Navigation color - Links in their default state
  • Hover color - When you hover over a link
  • Active color - The page currently being viewed 

To change the link's 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.

Change spacing between and around links

To change the spacing/padding between links in a navigation menu, use the spacing tweaks in the Header, Banner, or Navigation sections in the Style Editor.

Link spacing tweaks differ between templates and typically include words like these:

  • Padding
  • Spacing
  • Width

Here's an example of how these options might be grouped:

Move the menu

In some templates, you can change the position of the Top or Main Navigation. For example, from center to left or right of the site logo or title.

In the Style Editor, look for tweaks called Navigation Position, Navigation Alignment, or something similar.

Here's an example of how this might look in your Style Editor:

Save

When you’re finished making style changes, click Save for the changes to appear on your live site.

Navigation display by template

Here's how the Main Navigation displays in each template. Templates are grouped by family.

Note: Most mobile devices hide site navigation behind a menu icon or link. Larger mobile devices, such as tablets, may display Desktop view.

Template

Layout

Menu icon on desktop

Adirondack

Horizontal, top center

Uncheck Always Show Nav

Avenue

Horizontal, top left/center/right

 

Aviator, Aubrey, Encore

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

 

Bedford, Anya, Bryant, Hayden

Horizontal, top right

Automatic when links won't fit 

Brine, Basil, Clay, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne

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

 

Farro, Haute

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

 

Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift

Horizontal, top right

 

Momentum

Horizontal, in the footer

 

Montauk, Julia, Kent, Om

Horizontal, top left/center/right

 

Native

Horizontal, top center

 

Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi

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

Check Always Use Overlay Nav

Skye, Foundry, Tudor

Vertical, within an overlay

Always displays

Supply

Vertical, left sidebar

 
Tremont, Carson, Henson Horizontal, top left/right

Select Nav Style: Icon 

Automatic when links won't fit

Wells

Vertical, left sidebar

 

Wexley

Horizontal, top left/center/right

 

York, Artesia, Harris, Lange, Jasper, Shibori, Taylor

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

 

Fixed navigation

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

Fixed navigation is available in the following templates. Templates are grouped by family.

Note: In many templates, navigation can't be fixed on mobile devices, as indicated in the table below. This is to preserve space on smaller screens. In some cases, the navigation may be fixed on larger mobile devices, such as tablets.

Adirondack

In the Style Editor, check Always Show Nav.

Not fixed on mobile.

Aviator, Aubrey, Encore

In the Style Editor, use Info Page Layout to select either Offset or Business Card.

Not fixed on mobile.

Bedford, Anya, Bryant, Hayden

Index Pages only. The navigation reappears in a fixed position after you scroll past the first page. 

Not fixed on mobile.

Brine, Basil, Clay, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne

On mobile: Top mobile bar can be fixed (Fixed Mobile Top). Bottom mobile bar is always fixed.

Not fixed on desktop.

Farro, Haute

On mobile: Top mobile bar can be fixed (Fixed Mobile Top). Bottom mobile bar is always fixed.

Not fixed on desktop.

Flatiron

In the Style Editor, select Header Position: Fixed.

Not fixed on mobile.

Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift

In the Style Editor, check Fixed Position.

Not fixed on mobile.

Momentum

Navigation is always fixed.

Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi

Homepage Index Pages only. In the Style Editor, select Index Scroll Nav: Show On Scroll. The navigation reappears in a fixed position after you scroll past the first page. 

Not fixed on mobile.

Skye, Foundry, Tudor

Navigation is always fixed.

Supply

Navigation is always fixed on desktop. Not fixed on mobile.

Wells

Navigation is always fixed on desktop. Not fixed on mobile.

York, Artesia, Harris, Lange, Jasper, Shibori, Taylor

On mobile: Mobile bar can be fixed (Mobile Bar Position: Top Fixed or Bottom Fixed).

Not fixed on desktop.

Style 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.

To see how your navigation appears on mobile, switch the Device View to mobile. While viewing the mobile version, you can still access your Style Editor and make adjustments.

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. While this may contrast normally when viewed on a desktop, they may move into the same space on mobile, hiding your text.
Was this article helpful?
10 out of 48 found this helpful