Studio Editor: Using Hamburger Menus
5 min read
Hamburger menus are minimalist, space-saving menus that are only displayed when visitors click the menu icon. You can design every part of the hamburger menu to match the look and feel your client is looking for.
In this article, learn how to:
Adding a hamburger menu
Add a hamburger menu at any point from the Add Elements panel. You can choose which menu it displays - the site's main menu or a custom menu, specific to the context of the page it's on.
To add a hamburger menu:
- Click Add Elements
on the left side of the Studio Editor. - Click Menu & Search.
- Click Hamburger Menus.
- Drag and drop the relevant menu to the desired location on the page.
- (Optional) Create a new menu with custom pages:
- Select the menu icon and click Edit Menu.
- Select the vertical menu element.
- Click Manage Menu.
- Click the drop-down under Which menu is displayed?.
- Click Manage Site Menus.
- Click + Add New Menu at the bottom to create the custom menu.
Customizing a hamburger menu
After adding a hamburger menu, personalize every part of it to match the site's look and feel.
To customize a hamburger menu:
- Select the hamburger menu icon in the Studio Editor.
- Choose what you want to customize:
Hamburger menu icon
to decide which icon and / or text to show.
to adjust the alignment of the icon / text. If you're showing both an icon and text, you can set the spacing between them and the icon's position.
Menu container and overlay
so it takes up the entire screen, or simply adjust the size on the canvas.
to choose whether or not to show a background overlay, as well as the option to tap outside to close the container. 
Vertical menu
.
Close Button icon
Did this help?
|