What is hamburger menu?
A hamburger menu is a slider menu that is accessible through a (vaguely) hamburger-shaped icon. It is often used in responsive websites for smaller screen sizes where the full header menu cannot be shown.
Creating a hamburger menu
- Hide current header menu.
Hamburger menus normally substitute header menus on tablets and mobile.
So, the first step is to hide the header menu on smaller devices.
Select the header bar that you want to hide and click on ‘Display’ on the left. Uncheck the devices where you would like to hide the menu.
2. Add hamburger menu icon
- Head to tablet breakpoint using the responsive bar.
- Find hamburger menu icon by extending the left add panel. Choose ‘Icons’ and search ‘menu’.
- Resize and change color and position as you need.
Then , click on ‘display’ and uncheck the devices where you wouldn’t like the menu to show.
For example, if you want the hamburger menu to only show on mobile & tablet, uncheck desktop.
3. Create a side menu
Create the side menu that will show when a user clicks on the hamburger icon.
To create a side menu, create a modal by clicking on + on the top right of the page and choose modal. Shape the modal as a side menu.
Customize the modal by adding text and styling as you wish.
4. Link the icon and the modal menu
When you have both icon and menu, select the icon and add a link by clicking on the arrow on the right and selecting your menu.
5. Launch a live preview to check how your hamburger menu actually looks.
The live preview button it located on the top right corner of the editor.