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

[@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.

[@KerrieRedgate]

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

[@SamarJYTChannel]

Glad you like it! 😻

[@mairphotography21]

hey 👋 is there a way to make the menu disappear when you click any of the buttons? because now you have to go back and click the x to close instead of going where you want to, thanks!

[@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!

[@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

[@danielvoelkwebdesign]

Awesome tutorial :)

[@SamarJYTChannel]

Thanks mate 😍😍😍

[@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.

[@XSelent-qj6qz]

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

[@SamarJYTChannel]

Sure I’ll look into that

[@kwriajt]

Useless for me. I'm a beginner, way too fast. Can't see the way into the design.

[@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;
}
}*/