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. 

After adding a hamburger menu to your site, make it your own by customizing the elements below. 

Customize 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.  

Access 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:

Customize 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.  

This 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. 

The 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: