Mobile Menu
On small screens, Tabule Theme replaces the desktop navigation with an accordion-style mobile menu triggered by a hamburger button in the header.
How it works
- The hamburger (☰) button appears in the top-right corner of the header on screens narrower than the theme's responsive breakpoint.
- Tapping the button opens a full-width accordion panel that slides down from the header.
- Top-level items with children display an expand arrow (›). Tapping the arrow toggles the sub-items — the parent link itself remains clickable and navigates normally.
- Third-level items are nested inside the second-level accordion.
- Tapping outside the menu or pressing the close button dismisses it.
Mobile menu appearance
Mobile menu colors are configured separately from the desktop menu at Appearance → Customize → Menu Settings → Collapsible Menu Settings:
| Setting | Default | Description |
|---|---|---|
| Container background | #E8ECF2 | Background of the entire mobile menu panel. |
| Item background | #E8ECF2 | Background of individual menu items. |
| Item hover background | #E8ECF2 | Background when an item is tapped/hovered. |
| Font color | #222222 | Text color of menu items. |
| Font color on hover | #222222 | Text color on hover/tap. |
| Border bottom color | #c0c0c0 | Divider line between menu items. |
Dark mode and mobile menu
When dark mode is active, the mobile menu background and text colors automatically switch to the dark palette defined in dark-mode.css. You do not need to configure separate dark mode colors for the mobile menu.