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.
Sneak Peek
Here’s a quick sneak peek at what we’re going to create in this tutorial. As you can see the Mobile Menu looks a thousand times better than what Divi Offers out of the box and the best part is you can easily edit the Mobile Menu content using Divi Builder, isn’t that cool?
Download this Layout Custom Mobile Menu in Divi
Now, If you don’t want to go through the process of creating this, you can simply download the Layout and install it in your Divi -> Library. And then Insert it in your Divi -> Theme Builder -> Global Header.
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, which is awesome to the Human Eye!
And remember you can always easily customize the content of the Mobile Menu, by removing that line of code we added in the Section settings.
So that’s it for today’s tutorial, I hope you enjoyed and manage to make some stunning Mobile Menus in Divi. More Divi Tutorials coming your way! 🤞
Is it possible to make the open button inline with the close button?
Hmm, need more info on this 🤔
This is great. How does this work with Sub-menus?
You can replace the the Blurb Module with the Accordion Module or try custom code. Since you can build the mobile menu with the divi builder you can do almost anything here 🙂
that’s great. how & where can i add a code to make the screen freeze upon clicking on the hamburger icon??
This is awesome, thanks Samar! I tweaked it a little to create a full screen overlay mobile menu by setting the section min-height to 100vh when the menu is open and added this JavaScript and CSS in addition to yours to remove the scroll when the menu is open.
JS:
jQuery(“.sj-ham-icon”).click(function(){
jQuery(“body”).addClass(“remove_scroll”);
});
jQuery(“.sj-close-icon”).click(function(){
jQuery(“body”).removeClass(“remove_scroll”);
});
CSS:
.remove_scroll {
overflow: hidden;
}
I thought maybe this could help someone else in the future who wants a similar style of menu. This is what worked for me on an Android in Chrome. I’m not super adept at code or JS, so let me know if this could cause problems I’m not aware of.
That’s awesome, Nicolas; thanks for sharing. I think this will work flawlessly in disabling page scroll. Nice work 🙌
Comment *Hey Niko, one question, from where to make the call to the .remove_scroll class, from which session or row, thanks
This is awesome! Thank you for sharing. Is there any way to make the pop-up fade out to the top right corner (exit animation) instead of just disappearing? It is a bit jarring when it disappears.
Hi!
Thanks for sharing this tutorial, this looks like an amazing solution for a great esthetic mobile menu!
I encounter a few small issues that are probably due to my inexperience that you may be able to elaborate on.
I downloaded the JSON file but it seems the divi library gets stuck while importing the file. after a “sucessfull import” the screen tries to refresh and then simply goes back to the divi library page without the imported file being visible, so i guess the import fails.
I have tried to follow the above guide (both written and the video) to build the mobile menu myself but didn’t grasp how you actually build the X / exit button in the menu section to close the menu.
I also encounter alignment issues where the content of the section is left outside of the section that I create. could it be that other css code is interfering with the css code that is provided here?
Regards,
Fred
Hi Fred,
Thanks for the kind words.
As for the issue, I suggest reaching out to Elegant Themes support regarding the issue with Import, they should be able to help you out on this. I would suggest to try to import the JSON file instead of creating manually to avoid such issues.
Thanks!
Thanks, indeed Divi support verified through their remote support that the JSON imports just normally as it should and I just overlooked it in the Divi library overview.
Actually by contacting Divi for this I learned that Divi has such a thing as remote access. (Divi > Support Center > set Remote Access and Activate Full Admin Privileges to enabled. This can only be done at the request of a Divi support employee).
Thanks, indeed Divi support verified through their remote support that the JSON imports just normally as it should and I just overlooked it in the Divi library overview.
Actually by contacting Divi for this I learned that Divi has such a thing as remote access. (Divi > Support Center > set Remote Access and Activate Full Admin Privileges to enabled. This can only be done at the request of a Divi support employee).
Is it possible to make the blurb mobule which represents a menu item expandable upon clicking it? In that way, is it possible to make submenu items that expand upon clicking the parent?
Hi, thanks for the amazing guide ! Is there a way to make the mobile menu fade-out when you removeClass ?