How to create a burger menu button using WIX buttons

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

0 views

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
Blue Timbers Close

Bordon, Hampshire

GU35 0XL

info@vismarketing.co.uk

  • 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