Hamburger Menu and WIX

The hamburger menu, also known as the "hamburger button", "mobile icon", or just the "three-line button", is a three-lined symbol often found on websites. It usually consists of three horizontal lines stacked on top of one another, like this:



When clicked, the menu expands to reveal more content under each section. This saves space in website design by condensing menu options into smaller areas without cutting out important information, so users can find what they're looking for faster.


The hamburger menu originated as an option for mobile users who needed quick access to key functions while using smaller devices and mobile browsers, but it has since moved into the mainstream website design trend.



Hamburger Menu Benefits and Drawbacks


The hamburger menu offers some clear benefits:

  • Saves space with condensed menu options that display when clicked

  • Mobile user-friendly; allows users to find what they need faster


However, the hamburger menu is not without its drawbacks.

  • Menu options are less obvious when condensed into smaller areas, which can lead to more user error

  • Reduced menu visibility means reduced interaction on key pages and reduced brand exposure

  • It could also pose a problem for touchscreens because it lacks hover functionality. The hidden menus require clicking or tapping to open, so people with motor disabilities could have trouble accessing the content.

As with any website design trend, the use of the hamburger menu is not for everyone. It's best used when you need to condense a long menu into an easily accessible area, and when increased user engagement is more important than brand visibility. If your site does not require this functionality — or if it would present problems for certain users — then don't use it at all!



How do I create a Hamburger Menu on my WIX website?


Hamburger menus are made up of two parts:

  1. The hidden sidebar menu (lightbox).

  2. The three-line hamburger button, which leads to the sidebar menu.

To create a sidebar menu:

  1. Click the Add (+) button on the left side of the Editor.

  2. Click Interactive then select Lightbox.

  3. Select a lightbox with a sidebar preset.

  4. Click the lightbox and click the Settings icon.

  5. Rename your lightbox to something recognizable such as "side bar menu".

  6. Select No under Automatically display lightbox on pages.

  7. Delete all of the elements inside the lightbox but do not delete the 'X' icon.

  8. Add a vertical menu to the lightbox and design your menu, lightbox and overlay.

  9. Close the lightbox.

  10. Add a shape for the menu button:

  11. Click the Add (+) button on the left side of the Editor.

  12. Click Shape.

  13. Click the Basic Shapes tab.

  14. Click More Basic Shapes.

  15. Type "menu" in the search bar and press Enter.

  16. Select a menu design and click Add to Page.

  17. Click the Design icon to design your menu button.

  18. Drag the menu button into the header.

  19. Click the menu button and click the Link icon. Select Lightbox, choose your lightbox from the drop-down menu and click Done.

  20. Access your mobile Editor.

  21. Click the menu button that is linked to your lightbox (the one you just created) and click the Hide icon.


Example WIX Website with Hamburger Menu


Below is an example of a WIX Website with a hamburger menu.


See: Financial Divorce Expert


Menu Closed:

WIX Website with Hamburger Menu
www.financialdivorceexpert.com WIX Website with Hamburger Menu (menu closed)

Menu Open:

www.financialdivorceexpert.com WIX Website with Hamburger Menu (menu open)
www.financialdivorceexpert.com WIX Website with Hamburger Menu (menu open)