Mobile menu
Below the tablet breakpoint the desktop bar collapses to a logo and a hamburger. Tapping the hamburger slides in the off-canvas panel.
What is in it, in order
- Search form — always open, no reveal. Present when Header → Display the search icon is on.
- Primary menu — the same menu as the bar, full width, with sub-menu toggles.
- Social links — when Header → Display the social links is on.
- Header button — full width at the foot of the panel, when it is configured.
The panel is the bar’s mobile stand-in, so it follows the header’s switches rather than having a set of its own. Anything you turn off in the header leaves the panel too.
Opening and closing
- Tap the hamburger to open, the Close button or the dimmed overlay to close.
- Escape closes it.
- Focus is trapped inside while it is open, and returns to the hamburger when it closes.
The open and close are plain CSS with an inline handler, so the menu works with
JavaScript disabled; the small theme script adds the Escape key and the focus
trap. It loads in the head with defer precisely so those are listening from the
moment the menu can be opened.
What you can change
Not much, and that is intentional — the panel is a single column of links on a small screen, and there is not a lot to decide. What reaches it:
| Setting | Effect on the panel |
|---|---|
| Primary menu | its contents |
| Menu typography | the type of those links |
| Header colours | the panel follows the header’s colours |
| Search / social / button toggles | whether each block is present |
There is no separate mobile-menu section in the Customizer, because there is no setting that would belong only there.
Testing it
Resize a desktop browser rather than trusting a phone preview: the switch happens at the tablet breakpoint, and the interesting bugs are in the band just above and below it. Check that
- your longest menu item does not wrap awkwardly,
- your button label fits on one line,
- the panel scrolls if your menu is long.