How To Create a Custom Full Width Mobile Menu In Divi With No Plugins In Less Than 20 Minutes

I don’t know about you but I can INSTANTLY tell when a WordPress website has been built with the Divi theme (not saying that’s a bad thing) but honestly the default mobile menu is super ugly and it’s the one thing that I don’t like about Divi…

So, if you’re looking for a way to remove the default mobile menu that comes with the divi theme builder and build a full width mobile menu in Divi then this tutorial is for you.

How to create a global header in the divi theme builder

Before we dive into creating our custom full screen mobile menu, it’s important to understand the concept of global headers in Divi. A global header is a section that you can create and design one time, and then apply it to multiple pages on your website. This not only saves time but also ensures consistency throughout your website. To create a global header, follow these steps:

1. Navigate to Divi > Theme Builder
2. Click on “Add Global Header”
3. Give your global header a name
4. Design and customise your header using the Divi builder

In this tutorial I go through how to create your global header for desktop and a separate header for tablet and mobile. We are using a separate header for desktop and tablet/mobile as when we create the full width mobile menu we want to use a different menu as the mobile menu will have a divi library layout injected with short code.

Watch the tutorial to setup your headers and then you can move onto the next tutorial:

Creating Separate Menus for Desktop and Tablet/Mobile

Now that we have our global header set up, we need to create separate menus for desktop and tablet/mobile views. This will allow us to have a different menu layout for our full screen mobile menu.

1. Navigate to Appearance > Menus
2. Create two menus – one for desktop and one for tablet/mobile
3. Assign the correct menu in your global header

Plugins you will need to install before creating your full with mobile menu in Divi

There are two plugins i’m using to add the social media icons to your mobile menu in Divi.

1. Shortcodes for Divi
2. Shortcode for menus

Make sure these plugins are installed, but also to remember to take a backup of your website incase there are any errors, that way you can roll back to the previous version.

How to create a full width mobile menu in Divi with no plugins

In this tutorial I will go through the css that you will need to add to create your custom full width mobile menu in Divi and also how to inject Divi Library layouts into your mobile menu with shortcodes.

Here is the CSS you will need to add to your theme options. Want to know where to add this; Divi > Theme Options > Scroll down to Custom CSS at the bottom of the general tab.

/*changing the Divi hamburger menu to X*/
.mobile_nav.opened .mobile_menu_bar:before {
    content: '\4d';
}
/*rotating the Divi Menu icon*/

.mobile_menu_bar:before {
	transition: all .4s ease;
	transform: rotate(0deg);
	display: block;
}


/*rotate the Divi Menu icon on click*/

.mobile_nav.opened .mobile_menu_bar::before {
	transition: all .4s ease;
	transform: rotate(90deg);
	display: block;
}

/* Remove the top line in the mobile menu*/
.et_mobile_menu {
border-top:0;
}

/*making the Divi Menu full width*/
.et_pb_menu .et_mobile_menu{
    min-width: 105vw;
     padding-top: 20%!important;
   margin-left: -4vw;
    padding-bottom: 100vh!important;
}

/*removing the line from the menu items and adding line height*/

.et_mobile_menu li a {
padding:10px 10px!important;
border-bottom: none!important;
}

/*removing padding of the social media icons*/
.et_mobile_menu li li {
	padding-left:0%!important;
}

Conclusion

Creating a custom full screen mobile menu with Divi builder in WordPress may seem complicated at first, but with the help of Divi’s global headers and shortcodes, it can be done easily. By following this tutorial, you should now have a beautiful and functional full screen mobile menu on your website.

Don’t be afraid to play around with different designs and elements to make it truly unique. So go ahead and give it a try on your own website and see the difference it makes!

Remember to take a backup of your website before making any changes, just in case. Happy designing!

If you want to know more about the Divi Theme click here to find out more or if you are looking for more website tips click here.