Mobile

Usage

Open Appearance → Customize → Header & Menus → Mobile to control when the site switches to the mobile menu and how the slide-out drawer looks. Set the Breakpoint where the desktop links collapse, then adjust the header height, Drawer Width, and link colors.

Pick a Menu Icon and Close Icon and set their sizes. Site Overlay and Overlay Opacity dim the page behind the open menu.

Menu Button changes how the menu button looks. Icon is the bare icon. Icon + Menu adds the word Menu beside it. Pill puts the icon on a filled, rounded button in your button color (or Pill Color), and Pill + Menu adds the word too. A pill turns into a round close button when the menu opens, so visitors close the menu where they opened it. The Plus Menu Icon turns into an X when the menu opens.

Left unset, the pill's text turns black or white, whichever reads on the pill, and is picked again for the slightly darker pill on hover, so it always meets WCAG AA. Pill Text Color and Pill Hover Text Color set it yourself; a color you pick is used as is, so check it reads (4.5:1).

The drawer slides in with a quick, strong ease-out and its links come in one after another. Menu Speed sets the pace: Relaxed, Normal (the default) or Quick. Visitors who ask their device for less motion get a plain fade.

Drawer Style sets how the drawer meets the page. Overlay (the default) slides the drawer over the dimmed page. Push Page moves the page aside as the drawer slides in. Reveal Under slides the page off a drawer that stays put. With Push Page and Reveal Under the menu button moves aside with the page, so the drawer's own close X closes the menu and a Pill stays a pill. On the narrowest phones (under 360 px wide) the moved menu button fades out while the menu is open, so it doesn't sit under the close X at the default Drawer Width. With a wider drawer the button can still meet the X on small phones: keep Drawer Width near 16 rem with these styles.

Drawer Look sets how the links inside the drawer look. New sites start on Clean; existing sites keep Classic until you pick another look.

• Classic: the original drawer, with a line under each link.
• Clean: no lines, a little more room per link, and a + that turns into × when a submenu is open.
• Editorial: top-level links in your H3 heading type, submenus in body text, and a small "Menu" label above the list.
• Grouped: every submenu stays open under its parent, which shows as a small label (it still links to its page). Best for a few top-level links with short submenus.
• Bold: top-level links in large nav type, with the header button and social icons on one row at the bottom.
• Panel: tapping the arrow beside a link with a submenu opens the submenu as its own page over the list, with a Back row at the top (Escape also goes back). The parent link still opens its page. Best for long submenus. The drawer loads a small script only with this look.

Every look except Classic keeps the header button, search and social icons at the bottom of the drawer.

When to use it

• After setting up the desktop header, when the phone layout feels cramped or links are hard to tap.
• Sites with photo heroes that need a light menu icon on the first screen.
• Long menus that need a wider drawer.
• Sites that want a more modern, more obvious menu button: try Pill + Menu with the Plus icon.

Tips

• Background (Drawer Menu) colors the drawer. Drawer link colors are set separately below it.
• Reverse Print here affects the social icons and other text in the drawer. Set the drawer Link Color yourself rather than relying on the desktop colors.
• If the menu switches to mobile too early or too late, change Breakpoint a little at a time and check on a real device.
• Set Close Icon Color so the X stays visible against your drawer background.
• Open the menu in the preview before you start: it stays open while you change these settings, so you see each change in place.