Wix Harmony Editor: Using Hamburger Menus
8 min
In this article
- Adding a hamburger menu
- Customizing the button that opens the menu
- Customizing the hamburger menu's container
- Customizing the button that closes the menu
This article refers to the new Wix Harmony Editor, released in December 2025. Wix Harmony is not yet available to all users. If you're unsure whether you’re using Wix Harmony or the Wix Editor, view more information here.
Hamburger menus offer a clean, space-efficient solution that only appears when visitors click the menu icon.
You have full control over the design elements of the hamburger menu, allowing you to tailor it to your specific branding and style.
Adding a hamburger menu
There are 2 easy ways to add a hamburger menu to your site. You can add a brand new hamburger menu from the Add Elements panel, or quickly switch an existing menu to the hamburger style right from the action bar.
To add a hamburger menu:
- Go to your editor.
- Choose what to do next:
Add a new hamburger menu
Change the existing layout to hamburger
Did you know?
When you add a horizontal or vertical menu to your header on desktop, it automatically becomes a hamburger menu on mobile. This ensures that your visitors are able to access your menu from all devices.
Customizing the button that opens the menu
Your hamburger menu button is a key part of your site’s navigation, and you can easily make it match your style. Adjust the icon and text to say exactly what you want, then fine-tune the design details—down to the colors, spacing, and animation.
To customize the 'Open' button:
- Go to your editor.
- Click the hamburger menu icon.
- Choose how to customize the button:
Replace the icon
under Choose an icon.Set up the button's text
on the action bar.Design the button
on the action bar.Customizing the hamburger menu's container
When visitors click your hamburger menu icon, your site menu opens in a spacious container with an overlay, making the menu easy to read. There's plenty of room to personalize — adjust the container, menu and overlay colors, and add more elements like your logo or a social bar.
To customize the hamburger menu's container:
- Go to your editor.
- Access the container:
- Click the hamburger menu icon.
- Click the Regular Mode dropdown and select Hamburger Menu.
- Choose what to do next:
Design the container
: Change the background color of the container and the overlay color, choosing one of your brand colors or a custom color.
: Define the borders of your the container so it stands out, choosing a color, width and style. Click the Edit individual borders icon 
to design each side of the border.
: Make the corners of the container more square or round by dragging the slider under Radius. Click the Edit individual corners icon 
to design each corner separately.
: Apply inner and outer shadow to give the container an interesting 3D effect, setting the position, blurriness, color and more.
: Add breathing room to your content by adding padding around the container.
: Decide where everything should be positioned – the close button, the menu within the container, and the container in relation to the page. You choose how much space the container takes up (e.g. third of page, half page, etc.)Manage and design the menu
Add elements to the container
Done editing?
Click Done next to Editing: Hamburger menu on the floating bar to go back to your page.
Customizing the button that closes the menu
Personalize the button that visitors click to close the hamburger menu. Replace the icon, add helpful text (e.g. 'Exit') and design it as you wish.
To customize the 'Close' button:
- Go to your editor.
- Access the 'Close' button:
- Select the hamburger menu icon.
- Click the Regular Mode dropdown and select Hamburger Menu.
- Click the 'Close' button.
- Choose what to do next from the action bar:
Add text to the icon
Customize the icon
Design the 'Close' button
Done editing?
Click Done next to Editing: Hamburger menu on the floating bar to go back to your page.
