• a

NEW & POPULAR DIVI CHILD THEMES

Molti

Molti Ecommerce

Molti LMS

Florence

WANT MORE?

MEMBERSHIP

Join Membership

Membership Benefits

CONTACT US

Send us a Message

Visit Documentation

RESOURCES

Our Blog

Customer Showcase

What's New?

Useful Tools

Affiliates

NEW & POPULAR DIVI CHILD THEMES

Molti

Multipurpose Business Child Theme for Divi.

Molti Ecommerce

Multipurpose Business/Ecommerce Child Theme for Divi.

Molti LMS

Multipurpose LMS/Business Child Theme for Divi & LearnDash.

Florence

A Delicate & Innocent Business Child Theme for Divi.

WANT MORE?

Join Our Membership

Get access to all our Divi Products by Joining Membership!

Membership Benefits

See the Benefits of Joining Membership before you Join!

Send us a Message

Need Help? Send us a Message and we'll be glad to help.

Visit Documentation

Instead of waiting for us, try to find your answer in our Documentation.

Our Blog

See the Latest News, Divi Tips & Tricks and a lot more.

Useful Tools

Some Useful Divi & Web Design Tools that we use and you'll love.

Customer Showcase

See cool websites made by our Customers using our Child Themes.

Affiliates

Earn Money while Promoting our Products today.

What's New?

See what we've been working on and what's new from us.

Creating a Custom Mobile Menu in Divi (No Plugin)

Samar Jamil

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?

Divi Mobile Menu Demo

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.

add css to Row settings in Divi

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

custom mobile menu layout

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*/
hide the Section with CSS in divi

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.

Set Section Position to Fixed in Divi

Finally, add this class to the Section: sj-mobile-popup

Add class to the section settings

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

add class to the Icon module in divi

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;
  }
}
Add CSS code in Divi Theme Options

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>
Add Javascript code in Divi Theme Options

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!

Divi Mobile Menu Demo

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! 🤞

Share The Love ❤️

Written by: Samar Jamil

I Love to make beautiful and creative Divi Child Themes, Layouts and Module Designs for everyone to help them create beautiful websites with ease using Divi. I also Enjoy making helpful Divi Tutorials, Freebies, and More!