top of page

How to create a burger menu button using WIX buttons

This short tutorial will show you how to create a bespoke burger menu button using WIX Buttons.

The button will react when you hover and click on it.

In order to achieve desired effect, you need to design 3 versions of the menu button - one for each variation (Regular, Clicked and Hovered).

I used affinity design software and saved my icons as PNG files with transparent background.

  1. Create 3 versions of a button and save it as PNG files with transparent background. I used Affinity Designer for this.

  2. Add any animated button from: Menu > Button

  3. Click on the button and go to "Change Icon"

  4. Swap each version of the icon to your custom PNGs: Regular, Hover, Clicked

  5. Change transition from None to Dissolve

  6. Link the icon to the lightbox menu


Here is a short video:

Check out my other post that explains how to design side menu using lightbox feature on WIX.

#wix #burgermenu #design #tutorial

Untitled design (20).png

Thanks for subscribing!

Are you curious about the latest WIX news?

Our newsletter will keep you up-to-date on all the latest WIX tips and tactics from Search Engine Land and other sources all over the Web.


Subscribe today.

Start your project with VISION:

bottom of page