Below the tablet width (768px) every header layout collapses to the same bar: branding at the left, the search icon and a hamburger at the right. The hamburger opens the drawer.
What is in it
In this order:
- The primary menu, stacked, with sub-menus indented under their parents and always open.
- Anything a plugin has added — with OwlDraft Publisher, the Sign in or Account link.
- The header button, full width.
- The social icons.
It is the same menu as the desktop bar. There is no separate mobile menu to maintain, and no menu location for one.
The search form is not in the drawer. The search icon stays in the bar at every width and opens its own dialog, so the form is one tap away rather than two.
How it behaves
The drawer is a <dialog>, driven by the theme’s one front-end script (js/modal.js, 9 KB unminified — the only JavaScript file Stoat loads). It gives you, for free and without a setting:
- Escape closes it.
- Clicking the backdrop closes it.
- Focus is trapped inside while it is open, and returned to the hamburger when it closes.
- The page behind does not scroll while it is open.
- The header, main content and footer are marked inert, so a screen reader does not read through the drawer into the page underneath.
Without JavaScript
Nothing breaks. With scripting off the theme hides every opener — the hamburger and the search icon — and prints the drawer’s contents and the search form as ordinary blocks at the foot of the page. A reader gets the menu and the search box as page content rather than two buttons that do nothing.
Turning things off
The drawer’s contents follow the header’s own switches:
| To remove | Turn off |
|---|---|
| The social row | Customize → Header → Display the social links |
| The button | Clear Button text |
There is no switch for the drawer itself. A site with no primary menu assigned still gets a hamburger, and it opens an empty panel — which is one more reason to assign a menu.