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

In this tutorial I'm going to walk you through step by step on how to:
1. Create your menus in WordPress
2. Create your Global header in the Divi Theme Builder
3. Add social media icons to your Divi mobile menu
4. Make you mobile menu full width with a little bit of CSS
5. Grab the Divi header layout bundle - full width mobile menu & collapsible submenu included in all Global Headers.
Want to grab the css just visit my blog post:
sarahworboyes....
_____
Purchase the Divi Header Layout Bundle - Full Width Mobile Menu with collapsible sub menu: sarahworboyes....
View the demo by clicking below:
demo.sarahworb...
_______
SUBSCRIBE FOR MORE VIDEOS:
‪@sarahworboyes‬
LET'S CONNECT!
Blog: sarahworboyes....
Instagram: / sarah_worboyes

[@earth_to_rory]

Thank you so much, this is exactly what I was after!

[@chaoscoordinator5263]

Great help thanx

[@livingwithshon]

Thank you for the video. This is the best video I have found on making a fullwidth mobile menu. Unbelievable that Divi has still not updated such a vital part of builder. The only real problem with this solution (and most others) is that it introduces horizontal scroll when the mobile menu is open. For the life of me, I have not been able to find a solution to this problem.

[@sarahworboyes]

I would adjust the width of the mobile menu or use this code in your CSS /*prevent horizontal scroll on mobile*/ @media all and (max-width: 980px) { html, body { overflow-x: hidden; } body { position: relative } }

[@joshtrudell5907]

Hi Sarah - this was an incredibly helpful video. Thank you so much for putting it together!

[@sarahworboyes]

If you have anything else that comes up that you would love to know how to do then feel free to pop it in the comments

[@RichardWadeUK]

Great tutorial! Thanks Sarah!

[@faticonimassimiliano]

Thank you! very well!

[@MultiKezo]

Thanks a lot. Have a issue how to change width of mobile dropdown menu for a client site and it's works fine :). Subbed...

[@Ormexrak]

Hi, great video, i just have one question. I can't see to find the shortcode menu option even in the screen option settings. Any idea why ?

[@sarahworboyes]

Go to screen the screen elements tab and it's under Show advanced menu properties to toggle on

[@conorchapman]

Hi Sarah, just wondering how you’ve nested the submenu with the plus icons?

[@sarahworboyes]

This is the best tutorial I've found on how to do this: www.peeayecreative.com/how-to-collapse-divi-mobile-menu-submenus/ you can customise the icons and styling

[@OaklandDB]

Great video! I would love to know how to make the submenus be collapsed like yours are (with the "+" next to link)?

[@sarahworboyes]

This is the best tutorial I've found on how to do this: www.peeayecreative.com/how-to-collapse-divi-mobile-menu-submenus/ you can customise the icons and styling

[@Fumi-TodoZacatecas]

Thank you very much for your video. I confirm that it has been very useful to me, I only have a doubt, the submenus of my page do not collapse like yours, but rather they appear when you click on the hamburger icon. The "+" symbol does not appear either. Wouldn't you have a video on how to achieve it?

[@sarahworboyes]

www.peeayecreative.com/how-to-collapse-divi-mobile-menu-submenus/