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.

Divi Header Layout Bundle - Full Width Collapsible Mobile Menu

The Divi Header Layout Bundle is a mobile responsive solution to a no plugin full width mobile menu in the WordPress Divi Theme.

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
Full Width Mobile Menu In Divi with no plugins

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.

Plugins to install to create social media icons in your Divi Mobile Menu

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.

If you found this post helpful, please share

Sarah Worboyes, Website Designer and Dubsado Strategist

Hi, I’m Sarah your WordPress Website Designer & Dubsado Specialist based in Ealing, London. I write about all things WordPress, Divi, SEO & Dubsado.

Divi Website Templates

Categories

Related Posts

Free Divi Links Page for Instagram, Link In Bio, LinkTree Page Free with Divi

Download Your Free Divi Links Page For Instagram; Ditch LinkTree & Improve Your SEO

About The Author

Meet Sarah Worboyes, a freelance Website Designer and Dubsado Strategy. Born and raised in London, Sarah is a blend of creativity and strategy, combining both aspects beautifully in her work. Her passion for design, coupled with her expertise in strategic client experience via Dubsado, results in high-quality and even higher conversions.

To keep up with her latest professional insights and quirky takes, follow Sarah on her social media @sarah_worboyes.

Download now

Enter your details below to receive your link in bio template

Coming Soon

By joining the waitlist you'll be notified when this template is live & you'll receive 20% off!