Header: Menu button
Menu button
The menu button is the hamburger icon that opens navigation in a sidebar and is mainly used on phones and small screens. When pressed, the menu expands. This block allows you to select the icon, set its size, color, and whether it should open the mega menu.
What it does
On desktop, there is space to display the entire menu across the header. On a phone, there isn't, so navigation is gathered behind one button — usually the three-line hamburger icon. This block is that button. When someone presses it, the menu opens as a panel.
Settings
Setting | What it controls |
|---|---|
Menu button icon | Which icon is used on the button (hamburger is default; you can choose another from the icon set) |
Icon size | How large the icon is |
Icon color | The color of the icon |
Toggle mega menu | Whether pressing the button opens the full mega menu or a simpler menu |
Shape and spacing
Setting | What it controls |
|---|---|
Corner radius | Rounds the button's corners |
Use global radius | Use the theme's global corner rounding instead |
Inner spacing (padding) | Space inside the button, around the icon |
Outer spacing (margin) | Space outside the button |
Layout and visibility
- Width-settings for desktop, tablet, and mobile.
- Custom CSS class and block conditions for advanced styling and show/hide rules.
This block is intended for the mobile layout. It is usually hidden on desktop, where the full Main Menu block is displayed instead.
Tips
- Keep icon size comfortable for thumbs — too small and it becomes difficult to hit.
- Combine this with the Main Menu block: show the menu button on mobile and the entire menu on desktop using each block's width and visibility settings.