The hamburger menu icon is an essential element for mobile navigation on modern websites. But Divi’s default icon lacks personality. With SVG images, you can easily customize your hamburger menu toggle with a slick animated icon that matches your brand.
A custom SVG hamburger animation can do wonders for differentiation. Your visitors will appreciate the extra touch of creativity when browsing your site’s menu on phones and tablets. The custom icon immediately communicates your brand’s style.
In this tutorial, I’ll walk through how to upload and implement a custom animated SVG hamburger icon in Divi. In just a few easy steps, you can implement a unique animated hamburger menu toggle that elevates your overall website experience. Let’s get started!
Divi Mobile and SVG hamburger icons
By providing you with the best and most in-demand features, Divi Mobile is continually developing to help you create amazing Divi websites. The option to add SVG hamburger icons is one such frequently requested feature, and with Divi Mobile v1.6.4+ you can now upload SVG code directly from the Divi theme customizer.
Create Amazing Websites
With the best free page builder Elementor
Start NowWhy use SVG code? because you can apply classes to the various pathways in the SVG code to change any aspect of your SVG image with CSS.
Now, in this tutorial, we'll use and modify a snippet we found online to create Divi hamburger menus with SVG icons and make them compatible with Divi Mobile.
Let's get started since this requires us to add and potentially update some classes in the current code.
Adding the SVG icon code
This is really easy as all we have to do is copy the HTML code from the opening and closing svg> elements to generate the SVG code from our example code above. After that, we'll proceed to add it to Divi Mobile's settings.
Let's begin by opening the code editor and copying the HTML tab's code.
By navigating to the Divi Mobile settings in the Divi theme customizer, we can add this SVG code to our Divi hamburger menu.
Access the Burger Menu page by going to Divi > Theme Customizer > Divi Mobile.
Divi Mobile Settings
- Burger Menu Style: Custom SVG Code
- Custom SVG Icon Code: Paste the copied SVG code here
Now save & publish it.
And, your icon would resemble the strange jumble shown below if you utilized the SVG code that we chose. This is because of how this code was written rather than how Divi Mobile renders the icon. But don't worry, we'll address that in the following step.
To resole this, add the following SVG Code.
<svg width="100" height="100" viewBox="0 0 100 100"> // Increase the size with the width and height property
<path class="line line1" d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058" />
<path class="line line2" d="M 20,50 H 80" />
<path class="line line3" d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942" />
</svg>You'll see that there are classes given to the paths in this SVG code, but that isn't always the case. To be able to change each path with CSS code, you may occasionally need to add classes like line, line 1, line 2, and line 3. And no, we're not referring about your toxic ex in that manner; rather, we're talking about animating the paths to produce snazzy animated hamburger menu icons.
Now we just need to transfer the CSS code into our Divi website.
Animation CSS Code
We need to add some CSS, which was sensibly given in the sample, to help things line up a bit and add our icon motion. First, we'll add the changed CSS, and then in the final section of this Divi tutorial, we'll discuss the adjustments we made to make everything work together harmoniously.
There are three ways we can add our CSS, and they are as follows:
Divi Theme Options
Simply navigate to Divi > Theme Options from the WordPress Dashboard, then put the CSS code in the Custom CSS box. This will enable the CSS to be used throughout your Divi installation.
Theme Customizer
Simply navigate to Divi > Theme Customizer or Appearance > Customize from the WordPress Dashboard, then put the CSS code in the Custom CSS box. Similar to how it makes the CSS accessible from wherever on your Divi installation.
Code Module
Simply add a code module, open some opening and closing script> tags, and paste the CSS code onto the page we previously made. This will restrict the CSS to being accessible just on that page.
We must use either technique 1 or 2 for this lesson because the hamburger menu is global. The CSS code from our example code from above can now be copied. Only the CSS for our SVG icon classes, line, line 1, line 2, and line 3, which we already know, will be required.
You'll also see an opened class, which describes how the icon appears after being clicked. Don't worry about it just yet; we'll take care of it when we modify the code for Divi Mobile.
Go to Divi > Theme Options from the Divi dashboard after copying our CSS.
Divi Theme Options
Here is code you need to paste.
.divi-mobile-menu .line {
fill: none !important; /* overwrite Divi Mobile setting to add color to the path */
stroke: black; /* Change this color for the icon */
stroke-width: 6; /* Increase the line thickness */
transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.divi-mobile-menu .line1 {
stroke-dasharray: 60 207;
stroke-width: 6; /* Increase the line thickness */
}
.divi-mobile-menu .line2 {
stroke-dasharray: 60 60;
stroke-width: 6; /* Increase the line thickness */
}
.divi-mobile-menu .line3 {
stroke-dasharray: 60 207;
stroke-width: 6; /* Increase the line thickness */
}
.show-menu .divi-mobile-menu .line1 {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
stroke-width: 6; /* Increase the line thickness */
}
.show-menu .divi-mobile-menu .line2 {
stroke-dasharray: 1 60;
stroke-dashoffset: -30;
stroke-width: 6; /* Increase the line thickness */
}
.show-menu .divi-mobile-menu .line3 {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
stroke-width: 6; /* Increase the line thickness */
}Making the CSS compatible with Divi Mobile
You're in the right place if you decided against taking the easy route and want to adapt additional code snippets for your SVG icons because we'll quickly go over everything we had to change to get this to operate flawlessly with Divi Mobile.
You may compare the snippet with the adjusted code that is appropriate for Divi Mobile in the table below. Actually, we just need to make 3 adjustments.
Icon fill method: We must add since this CSS renders the icon using stroke rather than fill.It is crucial that we override the Divi Mobile CSS at line 2 of this code.
Increase specificity: To avoid any problems, we need to enhance the specificity of the CSS because it uses several quite widely used class names. To do this, each line class is given the.divi-mobile-menu class, which encircles the hamburger icon. Try adding this class before any classes that may be in the copied CSS if you are having trouble with a different snippet.
Change clicked state class: The.opened class, which is added to the icon when the hamburger icon is clicked, is used on lines 20, 25, and 30. This gives CSS ninjas like you the ability to change the hamburger icon's appearance when this occurs. One issue is that Divi Mobile does not utilize this class name, but it is simple to fix. Simply substitute the.show-menu class with the one that the other developer used to represent the clicked state of the hamburger icon.
This end of the road is here!
Wrapping Up
And that's it! With just a few simple steps, you successfully implemented a custom animated SVG hamburger icon in your Divi website. This small customization can go a long way in enhancing your mobile navigation experience. Your new icon immediately communicates your brand's personality while providing a clean menu toggle.
As you build out the rest of your Divi website, look for other areas where you can incorporate custom SVG graphics and animations. With a library of SVG images at your disposal, the possibilities for unique illustrations and animated interactions are truly endless. Your visitors will appreciate these subtle, branded touches as they explore your content.
