Editor X: Using Hamburger Menus
Hamburger menus are minimalist, space-saving menus that are only displayed when visitors click the menu icon. Customize the design of your hamburger menu to match the look and feel of your site. You can also choose whether it opens as a sidebar or a full-screen menu. Learn how to:
Add a hamburger menu Customize a hamburger menu Create multiple hamburger menus using lightboxesAdding a Hamburger Menu
Click Add  at the top left of the Editor. Click Menu & Search. Click Hamburger Menus. Drag and drop the relevant menu to the desired location on your page.  (Optional) Create a new menu with custom pages:
    
Click the menu icon and select Open Menu. Select the vertical menu showing your pages. 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 MenuAfter adding a hamburger menu to your site, make it your own by customizing the elements below. Menu IconCustomize the button that visitors click in order to open the hamburger menu. Click the Design icon  to adjust the button's fill color, border and shadow. You can also click Change Basic Shape to select a different icon.  Menu ContainerAccess the container that features your menu by clicking on the menu icon and selecting Open Menu.Then, select the menu container and customize it by doing the following:Add elements to the menu containerYou can add any elements you need to the menu container. Add your site's name and logo, social media links, a log in bar for your members or any other element you need.Change the container fill colorChoose a background color for the container and overlay by clicking the Design icon . Add an animation to the menu containerAdd a cool transition by clicking the Animation icon . For example, you can make your menu fade or glide in when opened. Change the container's sizing and alignmentChange the container's sizing and alignment by clicking the Inspector icon  at the top right:

Alignment: Align your menu to the left, center, right, top, middle or bottom of the screen by clicking the relevant icon.


 Sizing: Decide whether your menu opens as a sidebar or a full-screen menu. By adjusting the width, you can make your menu cover only part of the screen or stretch across the entire viewport. 
Note: The minimal height for the menu is automatically set to 100vh so that it covers the entire screen, from top to bottom.
Close Menu IconCustomize the icon that visitors click in order to close the menu. By default, the X icon appears at the top right of your menu container but you can always move it around as you wish. Click the Design icon   in the Inspector panel to adjust the button's fill color, border and shadow. You can also click Change Basic Shape to select a different icon.  Vertical MenuThis is the actual menu element. Click Manage Menu to choose the pages, links and submenus that it displays. Then, change he alignment of your menu items and submenu arrow by clicking the  Layouts icon .Click the Design icon  in the Inspector panel to design the menu for two states: Regular and Selected, for when a visitor selects a menu item. Creating Multiple Hamburger Menus Using LightboxesThe container of your hamburger menu is considered a Master section, which means that you can only create one hamburger menu per site. However, you can achieve a similar effect by adding a lightbox that displays a custom vertical menu. Select an option below to learn more:Add a lightbox as a menu
Click Add  at the top left of the Editor. Click Layout Tools. Click Lightboxes. Select a sidebar preset such as this one:


 Set up your lightbox:
    
Click Set Triggers. (Optional) Give your lightbox a name you can recognize. Select No under Automatically display lightbox on pages.   Delete elements you don't need from the lightbox. Do not delete the 'X' icon. Add a vertical menu to your lightbox and design it to your liking. Click Done next to Editing: Lightbox.Add a button linking to the lightbox menu
Click Add  at the top left of the Editor. Click Decorative. Click More Basic Shapes. Type "menu" in the search bar and press Enter on your keyboard. Select a design and click Add to Page. Link the button to the lightbox:
    
Select the relevant button in the Editor. Click the Link icon . Select Lightbox on the left. Select the menu lightbox in the drop-down under Which Lightbox?.   Click Done.