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

No tags yet.

Start your project with VISION:

  • White LinkedIn Icon
  • White Facebook Icon
  • White Twitter Icon
  • White YouTube Icon
  • ic_mail_outline_white_24dp_1x
© 2015-2021 VISion

Wix web design Hampshire, UK. Get your wix website designed and managed by UK based, certified webmaster.

We also offer wix support, SEO services, and PPC campaigns management including google Adwords.

Contact VISion digital marketing specialist now.

0330 058 2595


Bordon, Hampshire

GU35 9BW