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

Featured Posts
Recent Posts
Archive
Search By Tags
No tags yet.
Follow Us
  • Facebook Basic Square
  • Twitter Basic Square
  • Google+ Basic Square

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.

Web Design

Internet Advertising

Marketing Ideas

Wix websites design and marketing
  • White LinkedIn Icon
  • White Facebook Icon
  • White Twitter Icon
  • White Google+ Icon
  • White YouTube Icon
  • ic_mail_outline_white_24dp_1x
© 2015-2018 VISion
Vision web design and marketing