How to Create a Custom Mobile Menu in Divi - Using Divi Builder (No Plugin)

Link to Tutorial: samarj.com/creating-a-custom-...
In this video, we'll see how you can easily create a custom Mobile Menu in Divi that's build using the Divi Builder itself. The Default Divi Menu Design is totally trash and that's what we're going to fix in this tutorial.
Timestamps:
0:00 - Intro
0:53 - Setting up & Creating the Mobile Menu
5:49 - Results
----------
Hi there!
New to The channel? If so, here's what you need to know: I like Divi Theme (& WordPress in general) a LOT, so I use this channel to explore them, Provide Stunning Divi Tutorials & Products to help you build amazing Websites with ease.
Our Social Links:
📘 FACEBOOK: samarj.com/facebook
📷 INSTAGRAM: samarj.com/instagram
🚨 Make sure to Visit our Website for more Amazing Divi Resources!
samarj.com
Join our Family for new videos every Week!
Affiliate Links:
Buy Divi Today: bit.ly/2Znm1eX
Buy Divi Supreme: bit.ly/2KyuoBa
Get Cloudways Hosting: bit.ly/2LL3GHZ
Thanks for Watching 😍
Make sure to Hit that Subscribe Button, I'll truly appreciate it 😃

[@KerrieRedgate]

Very nice design. Thank you. I love the way the menu slides out from the hamburger!

[@SamarJYTChannel]

Glad you like it! 😻

[@danielvoelkwebdesign]

Awesome tutorial :)

[@SamarJYTChannel]

Thanks mate 😍😍😍

[@Celessam]

Thanks for the tutorial! How do I make the menu section (and the popup section) stick to top when scrolling?

[@SamarJYTChannel]

You can apply a Fixed Position to the Menu Section.

[@treffermedia9202]

Thank you so much! Great work you did! I have two questions, what do you think about closing the menu, once you click on one option?
Second Question is same than @celessam can I make it Sticky, using the divi sticky to TOP for both sections? or will there be issues? I give it a try an report back.... so far thanks again SamarJ

[@treffermedia9202]

Welll it was too easy :D I just added your class "sj-close-icon" to each menu item, TADA..... it works !!! thank you so so much! really starting to love CSS more and more.... especially with my chatty friend explaining me ewverything...... :D

[@cebusprod]

Really nice tutorial and the menu is easy to modify. But the desktop version has also changed, return to the Divi menu for me.

[@SamarJYTChannel]

Glad to hear that. And you’ll need to manually design the desktop version of the header as this tutorial only focuses on mobile menu.

[@jaanprinters_muneebrajpoot7557]

good work. but how we can add submenu if we click on service button it shows more option. is it possible ?

[@SamarJYTChannel]

You might wanna use Accordion module for that. Or try this out: divibooster.com/reveal-a-divi-module-or-row-section-when-button-clicked/
Hope that helps 😉

[@planeetpaul]

Is it possible to increase the speed of the menu unfolding? So that it is more snappy, almost instantly opening. Thank you!

[@SamarJYTChannel]

Yes, youll need to adjust the animation in the CSS from 0.34s to whatever you like. You can change it to 0 and it should be instant. Or simple remove the animation keyframe code!

[@XSelent-qj6qz]

Hi. Please record a video on how to make a quiz in divi

[@SamarJYTChannel]

Sure I’ll look into that

[@Angeal77]

Hi, could you tell me how to remove the animation? Like just make it snapier and make the menu appear instantly on click. I commented out this part of the code which I think is the animation and it's still happening
/*.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;
}
}*/