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 change the icon design in templates in the Brine family. To learn more, visit Brine structure and style.

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 works in displays in each template. Templates are grouped by family.

Template

Icon or link (Always shows on mobile)

When it shows on desktop

Adirondack

☰ icon

  • When the browser is narrow (640 px)
  • To always show show the icon on desktop, check Always show nav in the Style Editor.

Avenue

Menu link

When the browser is narrow (640 px)

Aviator, Aubrey, Encore

Menu link

When the browser is narrow (640 px)

Bedford, Anya, Bryant, Hayden

☰ icon

  • Automatically when links won't fit
  • When the browser is narrow (640 px)

Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, West

☰ icon

Change the icon design using the Mobile: Menu Icon section in the Style Editor. Options include two lines, dots, a plus icon, and squares.

 

When the browser is narrow (640 px by default. Adjust this using the Mobile Breakpoint tweak.)

Farro, Haute

☰ icon

When the browser is narrow (640 px)

Five

☰ icon

When the browser is narrow (640 px)

Flatiron

Menu link

When the browser is narrow (640 px)

Forte

☰ icon

When the browser is narrow (768 px)

Galapagos

☰ icon

When the browser is narrow (724 px)

Ishimoto

Menu link

When the browser is narrow (800 px)

Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift (Discontinued)

☰ icon

When the browser is narrow (768 px)

Momentum

☰ icon

When the browser is narrow (736 px)

Montauk, Julia, Kent, Om

Menu link

When the browser is narrow (640 px)

Native

Menu link

When the browser is narrow (640 px)

Pacific, Charlotte, Fulton, Horizon, Naomi

☰ icon

  • When the browser is narrow (768 px)
  • To always show the icon on desktop, select Always Use Overlay Nav in the Style Editor.

Skye, Foundry, Indigo, Ready, Tudor

☰ icon

Always displays

Supply

☰ icon

When the browser is narrow (1024 px, the width of an iPad in landscape)

Tremont, Camino, Carson, Henson

☰ icon

  • Automatic when links won't fit
  • To always show the icon on desktop, select Nav Style: Icon in the Style Editor
  • When the browser is narrow (640 px)

Wells

Menu link

When the browser is narrow (800 px)

Wexley

Menu link

When the browser is narrow (640 px)

York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori

☰ icon

When the browser is narrow (768 px) 

Was this article helpful?
3 out of 8 found this helpful