Hey, What’s up? It’s been long since I last wrote a Divi Tutorial but I’m finally back at it and hope to create more helpful Divi Tutorials for Divi users. And we all know how creating a Custom Mobile Menu in Divi is a painful process, It can take a lot of time to even add some good-looking hover effect, let alone adding interactive and stunning content to the Mobile menu.
So that’s why I’ve put up a simple and neat trick to create a stunning Mobile Menu in Divi, with a little bit of code. And you can easily customize the content of the Mobile Menu using the Divi Builder, we just need a bit of code for the working of the Mobile menu, then you can decide what you want to show in the Mobile Menu.
Let’s Get Started Creating Custom Mobile Menu in Divi
Now let’s get started with re-creating this same Mobile Menu. Since we’re only covering Mobile Menu in this tutorial, we won’t cover the Desktop Header, well that ain’t the hard part either.
First, create your Header Layout and how you want to show the Layout of your Menu. In our example, I’ve used 2 column row and added “display:flex” to Row Settings, to show it in 2 columns on Mobile.
Below that, I’ll create a new add a new section and build the content for the Mobile Menu. Here’s what I’ve designed for the Mobile Menu Content. As you can see, It looks pretty cool, also if you noticed, I added Divi’s Icon Module and Positioned it “Absolute” at the Top, so that we can use it to Close the Mobile Menu Popup.
For the close button to close the popup, add this class to the Close button that you’ll create: sj-close-icon
Now, we need to add the below CSS to the Section Settings -> Advanced tab -> Custom CSS -> Main Element, to hide this Popup by default.
display:none; /*Remove this line to edit the content of dropdown, add it back again once done*/
Now scroll down a bit, find the “Position” Settings, and change the Position to “Fixed” and Top Offset value to 30px and Z-index to an unlimited value (9999999999) so that It always stays on top of other content on your page.
Finally, add this class to the Section: sj-mobile-popup
Alright, we’re done with the Popup/Content of the Mobile Menu, one last thing we need to do is add the class to the Hamburger Icon so that It can trigger the Popup: sj-ham-icon
Cool, now we’re done with setting up the Mobile Menu hamburger icon that will trigger the popup/content and also the content itself. We just need to add some code for everything to work.
Here’s the CSS code, add it to the Divi -> Theme Options -> Custom CSS box, see the below image.
.sj-show-mobile-popup{
display:block !Important;
}
.sj-mobile-popup{
-webkit-animation: scale-in-top 0.34s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-top 0.34s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes scale-in-top {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
opacity: 1;
}
}
@keyframes scale-in-top {
0% {
-webkit-transform: scale(0) translateX(-50%);
transform: scale(0) translateX(-50%);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
opacity: 1;
}
100% {
-webkit-transform: scale(1) translateX(-50%);
transform: scale(1) translateX(-50%);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
opacity: 1;
}
}
Lastly, add this JS Code to Divi -> Theme Options -> Integration -> Add Code to the Head of your Blog. This JS code is for the working of the whole mobile menu.
<script>///Custom Mobile Menu JS by SamarJ
jQuery(document).ready(function() {
jQuery(".sj-ham-icon").click(function(){
jQuery(".sj-mobile-popup").addClass("sj-show-mobile-popup");
});
jQuery(".sj-close-icon").click(function(){
jQuery(".sj-mobile-popup").removeClass("sj-show-mobile-popup");
});
});
</script>
And Boom! You’re Done. Now check your Mobile Menu on the front end that you just build, It should be looking way better than before. And If you noticed, we also added a pretty cool entrance animation