How to add a custom animated SVG hamburger icon to Divi
Divi Engine
In this Divi tutorial we are going to show you how to add an awesome animated SVG hamburger icon to your Divi sites using Divi Mobile.We recently added the ability to add your own SVG code as your hamburger icon and after following this tutorial, you will see why that is super awesome!You can even combine what you learn here with our previous tutorial on creating a custom SVG logo in Illustrator to build and animate your own branded SVG hamburger icons.π Check that tutorial out here β https://youtu.be/w-woKxd1Rv0β€ Text Tutorial with code π https://diviengine.com/how-to-add-a-custom-animated-svg-hamburger-icon-to-divi/ Let’s gooooooo!π¨ IMPORTANT LINKS π¨β€ Get Divi Mobile π https://diviengine.com/product/divi-mobile/β€ Many SVG Snippets π https://freefrontend.com/css-hamburger-menu-icons/β€ Learn more about Divi Engine π https://diviengine.com/β€ Get the Divi Theme π https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=58998π CHAPTERS π00:00 Introduction01:28 The SVG icon we will be using02:11 New SVG feature in Divi Mobile03:04 Adding the SVG icon code04:38 Adding the CSS Code that will animate the icon06:58 Fixing the CSS to be compatible with Divi Mobile07:43 Add the class .divi-mobile-menu for specificity08:32 Replace .opened with .show-menu09:01 Fix the icon with !important10:16 Changing the SVG icon colors11:02 Changing the icon location in Divi Mobile12:47 Increasing the icon size13:50 Conclusion