Wix Harmony Editor: Using Hamburger Menus
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:
Choose what to do next:
Add a new hamburger menu
Click + Add at the top left of the editor.
Select Elements.
Click the Menu & Search icon
on the left.
Select the Hamburger Menu tab.
Drag and drop the relevant menu to the desired location on the page.
Change the existing layout to hamburger
Click the relevant menu.
Click Change Layout on the action bar.
Select Hamburger menu under Menu.
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:
Click the hamburger menu icon.
Choose how to customize the button:
Replace the icon
Click Customize Menu Icon on the action bar.
Choose if your icon is Static or Animated.
Tip: You can click Create New Animated Icon to create one of your own, using a start and an end icon.
Click the Replace icon
under Choose an icon.
Select a new icon from the Media Manager and click Update.
(For animated icons) Set the duration of the animation.
Set up the button's text
Click the Settings icon
on the action bar.
Choose what to do next:
Enter text to appear next to the icon on the button (e.g. 'Menu', 'Open').
Replace the icon that visitors click to open the menu.
Add an accessible name (alt text) that describes the icon to search engines and screen readers.
Design the button
Click the All design options icon
on the action bar.
Select the relevant part of the button under Choose what to design:
Open Button: Design the button as a whole – the fill color, border, corners, shadow, spacing, alignment and more.
Text: Control the design and formatting of the text that appears next to the icon on the hamburger menu button.
Animated Icon: Change the color, size and rotation angle of the icon.
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:
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
Customize the container that houses your menu. Change the background color, add borders, re-position the menu, and much more.
Click the All design options icon
on the action bar.
Verify that Hamburger menu is selected under Choose what to design.
Design the container:
Fill colors
: Change the background color of the container and the overlay color, choosing one of your brand colors or a custom color.
Tip: The overlay is a semi-transparent layer that blurs out the page and lets visitors focus on the menu.
Border
: 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.
Corners
: 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.
Shadow
: Apply inner and outer shadow to give the container an interesting 3D effect, setting the position, blurriness, color and more.
Spacing
: Add breathing room to your content by adding padding around the container.
Layout
: 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
Click the menu.
Choose what to do next:
Manage the menu items: Click Manage Menu on the action bar and add, reorder or remove menu items.
Design the menu: Click the All design options icon
on the action bar. Choose what you want to design – the menu items (e.g. font, text color, spacing) or the menu bar (e.g. background color, item width, space between menu items).
Add elements to the container
Drag elements from the Add Elements panel onto the container. For example, you can show your logo, a social bar, info about a recent promotion or anything that comes to mind.
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:
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
Click Edit Text on the action bar.
Enter the text you want to appear next to the icon (e.g. 'Exit', 'Close').
Customize the icon
Click Customize Icon on the action bar.
Choose if your icon is Static or Animated.
Tip: You can click Create New Animated Icon to create one of your own, using a start and an end icon.
Click the Replace icon
under Choose an icon.
Select a new icon from the Media Manager and click Update.
(For animated icons) Set the duration of the animation.
Design the 'Close' button
Click the All design options icon
on the action bar.
Select the relevant part of the element under Choose what to design:
Close Button: Design the button as a whole – the fill color, border, corners, shadow, spacing, alignment and more. If your button includes both icon and text, you can also decide on their positioning.
Icon: Change the size, color and angle of the icon.
Text: Design the text that appears next to the icon. Change the font, formatting, alignment, character spacing and more.
Done editing?
Click Done next to Editing: Hamburger menu on the floating bar to go back to your page.
Need A Professional Website?
Contact Us Today!
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected