Studio Editor: Using Hamburger Menus
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:
Add a hamburger menu Manage a hamburger menu Customize a hamburger menuAdding a hamburger menuAdd a hamburger menu at any point from the Add Elements panel. Depending on your client's needs, you can add multiple menus to the site and manage / customize them individually.To add a hamburger menu:
Click Add Elements  on the left side of the editor. Click Menu & Search. Click Hamburger Menus. Drag and drop the relevant menu to the desired location on the page. Managing a hamburger menuAfter adding a hamburger menu to the site, choose the menu it displays. You can display different menus on each individual hamburger menu, providing context specific to the page / section it's on.To manage a hamburger menu:
Select the hamburger menu icon. Click Edit Menu. Select the vertical menu element. Click Manage Menu. Click the drop-down under Which menu is displayed?.
    
Existing menu:  Select your chosen menu from the drop-down. New menu:

Click Manage Site Menus. Click + Add New Menu and create the custom menu.    Did you know?You can add items to the menu you've chosen by clicking + Add Item at the bottom of the panel.Customizing a hamburger menuAfter 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. Choose what you want to customize:Hamburger menu iconThis is the button visitors click in order to access the menu. 
Design the button: Open the Inspector panel to adjust the button, as well as the icon and / or text that it shows. Set up the button: Click the Settings icon  to decide which icon and / or text to show. Adjust the layout: Click the Layout icon  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 overlayWhen visitors click the hamburger menu icon a container opens. Click Edit Menu to access and customize it:
Design the container: Open the Inspector panel to change the background fill, add borders, adjust the corners and more.  Resize the container: You can click the Stretch icon  so it takes up the entire screen, or simply adjust the size on the canvas. Add elements to the container: You can add any elements you need, like the client's logo, social media links or a Login Bar for site members. Set up the container: Click the Settings icon  to choose whether or not to show a background overlay, as well as the option to tap outside to close the container. If the container only takes up some of the screen, a customizable overlay surrounds it to help visitors focus on the menu. Click anywhere on the overlay to design it in the Inspector panel. Set a color, a gradient or an image fill, add borders, adjust the corners and more.Vertical menuThis is the actual menu element. Click Edit Menu and select the vertical menu to customize it:
Set up the menu: Click Manage Menu to choose the pages, links and submenus that it displays.  Adjust the layout: Change the alignment of the menu items and submenu arrow by clicking the Layout icon . Design the menu: Open the Inspector panel to adjust the design for 2 states: Regular and Selected.Close Button iconThis is the 'X' button that visitors click in order to close the menu. Click Edit Menu and select the Close Button to customize it:
Design the button: Open the Inspector panel to adjust the button, as well as the icon and / or text that it shows.  Set up the button: Click Settings to decide which icon and / or text to show.  Adjust the layout: Click the Layout icon  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.