Help Center
    Help Center
  1. Creating your site
  2. Using the Wix Editor
  3. Managing pages and menus
  4. Menus
    5. Wix Editor: Adding and Setting Up a Hamburger Menu

Wix Editor: Adding and Setting Up a Hamburger Menu

5 min read
Hamburger menus are menus that display a button on your live site. When visitors click the button, the menu opens in a container. This means they're a great way to let visitors browse your site without compromising on space or layout.  
A GIF of a wix live site. The hamburger menu button is clicked, opening the menu in a container.
You should know:
Although the icons for hamburger and mobile site menus are similar, they are separate menus. Hamburger menus are not available to add in the mobile Editor, and any you add on desktop are not transferred to the mobile version of your site.

Step 1 | Add a hamburger menu to your site

Add a hamburger menu to your site to get started. There a variety of pre-designed options, so you can choose one that fits your site's theme and look.

To add a hamburger menu:

  1. Click Add Elements in the left side of the editor.
  2. Select Menu & Anchor.
  3. Click Hamburger Menus.
  4. Click and drag your chosen menu icon to the page.
The add elements panel. Hamburger menus in the menu and anchor tab are open, and the cursor is clicking a menu icon.

Step 2 | Set up the menu button

After adding the menu to your site, choose what to display on the button - text, an icon, or both. If needed, you can select a new icon and / or update the text to your liking.

To set up the button:

  1. Click the hamburger menu button on the page.
  2. Click the Settings icon .
  3.  Click Choose what displays to set what visitors see on your live site:
    • Icon only: Only the icon is displayed.
      • Replace icon: Click the Replace icon to choose a new icon for the menu button. You can choose from a variety of free options available from Wix, or upload your own.
      • Accessible name: Enter the icon's accessible name into the field.
        Note: This text allows screen readers to "read" the name and understand the button's purpose. It isn't displayed on your live site.
    • Text only: Only text is displayed on the button.
      • Text: Enter your chosen text into the field.
    • Text and icon: Both text and an icon are displayed.
      • Replace icon: Click the Replace icon to choose a new icon for the menu button. You can choose from a variety of free options available from Wix, or upload your own.
      • Text: Enter your chosen text into the field.
The hamburger menu button settings panel. The cursor is hovering over the accessible name field.

Step 3 | Manage your menu items

Choose which items you want to show in the menu. If you set the menu as advanced, you can show and hide items from the Manage Menu panel. If you do not enable advanced menus, you can make the desired changes from the Site Pages panel.

To manage your menu:

  1. Click the hamburger menu button on the page.
  2. Click Edit menu to open the menu's container.
  3. Select the menu items.
  4. Click Manage Menu.
  5. Use the options to manage the items:
    • Add an item:
      1. Click Add Menu Item at the bottom.
      2. Select and set up the item type you want to add.
    • Hide / Show an item:
      • Advanced menus:
        1. Click the More Actions icon beside the relevant item.
        2. Click Hide from menu .
          Note: To show an existing item in an advanced menu, you need to add it using the previous steps (Add an item). 
      • Regular menus:
        1. Click the More Actions icon beside the relevant item.
        2. Click Hide from menu / Show in menu .
The manage menu panel in a hamburger menu. The cursor has clicked add new item, and the options are displayed.

Step 4 | Set up the container

Use the container settings to choose how your site pages look and behave when visitors open the menu.

To set up the container:

  1. Click the hamburger menu button on the page.
  2. Click Edit menu to open the menu.
  3. Click the container.
  4. Click Settings.
  5. Set up the container the way you want:
    • Tap outside to close: Click the toggle to let visitors close the menu by clicking outside the container.
    • Show background overlay: Click the toggle to display a background overlay on the site page when visitors open the menu.
The settings of a hamburger menu container. The cursor is clicking the tap outside the close toggle.
What's next?

Did this help?

|
In this article
  • Step 1 | Add a hamburger menu to your site
  • Step 2 | Set up the menu button
  • Step 3 | Manage your menu items
  • Step 4 | Set up the container

Related content

Wix Editor: Adding and Setting Up Advanced Menus
Wix Editor: Customizing a Hamburger Menu
Wix Editor: About Advanced Menus

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched