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