Mobile Menus
Choose from three distinct mobile menu styles and configure exactly how your navigation behaves on small screens â all without touching CSS or JavaScript.
Setting the breakpoint
The breakpoint is the viewport width below which the desktop menu hides and the mobile menu appears. Set it in Menu Builder â Mobile.
The default is 768 px (standard tablet/mobile boundary). Enter any pixel value that suits your layout.
The mobile menu styles
1. Dropdown Default
The most common style. Menu items stack vertically in a classic dropdown panel directly below the menu bar. Sub-items indent under their parent.
- Familiar and universally understood
- Works well for menus with many items
- Best for: blogs, corporate sites, portfolios
2. Fullscreen
The menu items are centered on a full-screen overlay that covers the entire viewport. Large typography, lots of breathing room.
- Dramatic and modern feel
- Best for sites with 5â8 top-level items maximum
- Best for: agencies, photographers, landing pages
3. Drawer (Left or Right)
A panel slides in from the left or right edge of the screen, partially overlapping the page content. The rest of the page dims but remains partially visible.
- Familiar from mobile apps (e.g. Gmail, Google Maps)
- Good for deep navigation hierarchies
- Best for: e-commerce, portals, documentation sites
Switch between styles in Menu Builder â Mobile. The change takes effect immediately â no need to re-publish your menu.
Hamburger button
The hamburger (â°) button is the toggle that opens and closes the mobile menu. Configure it in the Menu Builder â Mobile section:
| Option | Description |
|---|---|
| Icon style | Classic (3 lines), Modern (rounded), or Minimal (thin). |
| Alignment | Left, center, or right of the mobile nav bar. |
| Icon colour | Independent from the menu item colour. |
| Button background | Optional background colour behind the hamburger icon. |
Sub-menu behaviour on mobile
When a menu item has sub-items, you can control how they expand on mobile with the accordion option:
- Accordion on â only one sub-menu can be open at a time. Opening one automatically closes the others. Recommended for long menus.
- Accordion off (default) â multiple sub-menus can stay expanded at once.
Set this in the Menu Builder â Mobile section.
Open / close animation
Choose how the mobile menu panel appears and disappears:
- Fade (default) â the panel fades in and out.
- Slide â the panel slides into view.
- Scale â the panel scales up from a smaller size.
The plugin automatically respects the prefers-reduced-motion CSS media query. If the visitor has enabled "Reduce motion" in their OS accessibility settings, all animations are disabled regardless of the setting above.