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

On mobile devices, Main Navigation links collapse behind a Menu link or ☰ icon (also known as the hamburger icon). A visitor can click or tap it to reveal the full menu. This is a popular responsive web design feature because it keeps menus user-friendly when they won't fit comfortably on a screen.

The link or icon can show on desktop browsers depending on your template and a visitor's browser size. Use this guide to learn how it works in your template.

Tip: You can style the icon in the Brine family.

When the icon or link displays

The appearance of the icon or link, instead of the full navigation menu, depends on:

  • The visitor's screen or device
  • Your template
  • The number of links in the menu
  • The length and font size of your navigation titles

Mobile

On mobile, the icon or link always displays. Visitors can tap the icon to reveal the full menu. For a preview, use Device View.

Desktop

On most desktop browsers, all the navigation links display by default instead of the icon or link. There are a few exceptions. To learn how this works in your template, see the table below.

The icon or link will show on desktop if:

  • The links are too long or if there are too many and they won't fit (some templates).
  • A visitor makes their browser very narrow. The typical browser width that triggers this change ranges from 640 to 800 pixels.

There are a few steps you can take to prevent the icon or Menu link from showing on a desktop:

  • Reduce the number of links in the menu. You can move inessential pages to Secondary or Footer Navigation or use folders to group related pages into drop-down menus.
  • Keep navigation titles short.
  • Switch to a template that only says "When the browser is narrow" in the third column of the table below.

Menu icon or link design by template

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

Template family

Icon or link (Always shows on mobile)

Shows on desktop...

Adirondack

☰ icon

  • In narrow browsers (640 px)
  • To always show show the icon on desktop, check Always show nav in Site Styles.

Avenue

Menu link

  • In narrow browsers (640 px)

Aviator

Menu link

  • In narrow browsers (640 px)

Bedford

☰ icon

  • Automatically when links won't fit
  • In narrow browsers (640 px)

Brine

☰ icon. Change the style with the Mobile: Menu Icon section in Site Styles.

  • In narrow browsers (640 px by default. Change this with the Mobile Breakpoint tweak.)

Farro

☰ icon

  • In narrow browsers (640 px)

Five

☰ icon

  • In narrow browsers (640 px)

Flatiron

Menu link

  • In narrow browsers (640 px)

Forte

☰ icon

  • In narrow browsers (768 px)

Galapagos

☰ icon

  • In narrow browsers (724 px)

Ishimoto

Menu link

  • In narrow browsers (800 px)

Momentum

☰ icon

  • In narrow browsers (736 px)

Montauk

Menu link

  • In narrow browsers (640 px)

Native

Menu link

  • In narrow browsers (640 px)

Pacific

☰ icon

  • In narrow browsers (768 px)
  • To always show the icon on desktop, select Always Use Overlay Nav in Site Styles.

Skye

☰ icon

  • Always displays

Supply

☰ icon

  • In narrow browsers (1024 px)

Tremont

☰ icon

  • In narrow browsers (640 px)
  • Automatically when links won't fit
  • To always show the icon on desktop, select Nav Style: Icon in Site Styles

Wells

Menu link

  • In narrow browsers (800 px)

Wexley

Menu link

  • In narrow browsers (640 px)

York

☰ icon

  • In narrow browsers (768 px) 

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

Go to the Home Menu, click Design, 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

This topic has come up on our Answers forum, and you can view the post here for more information and example code.

Was this article helpful?
16 out of 76 found this helpful