Editor X: Using Hamburger Menus

7 min read
Editor X is transitioning to Wix Studio, our new platform for agencies and freelancers.Learn more about Wix Studio
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:

Adding a Hamburger Menu

  1. Click Add  at the top left of the Editor.
  2. Click Menu & Search.
  3. Click Hamburger Menus.
  4. Drag and drop the relevant menu to the desired location on your page. 
  5. (Optional) Create a new menu with custom pages:
    1. Click the menu icon and select Open Menu.
    2. Select the vertical menu showing your pages.
    3. Click Manage Menu
    4. Click the drop-down under Which menu is displayed?.
    5. Click Manage Site Menus.
    6. Click + Add New Menu at the bottom to create the custom menu.

Customizing a Hamburger 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:

Close Menu Icon

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.  

Vertical Menu

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. 

Creating Multiple Hamburger Menus Using Lightboxes

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:

Did this help?