If you’ve got a particularly wide menu that’s wrapping on smaller screens, there’s an easy fix for it. Using a simple media query, you can swap the normal desktop menu out for the mobile version (hamburger – the three horizonal bars you see on mobile phones). Add the following CSS and adjust the max-width to determine when the hamburger replaces your normal Divi menu.
A max-width of 1024 pixels should be good to wrap on tablets but by increasing this amount you can achieve the same effect on smaller desktop and laptop screens.
I’m sure that will take care of some of your headaches.
Update:
If you have a particularly large menu, you might encounter problems with it not scrolling properly on smaller screens, the following CSS should fix that for you:
Divi Notes started as a way to document my own WordPress and Divi web design/development journey and, to my delight, has grown to become a helpful resource to many other Divi users out there. If you’ve found Divi Notes to be useful in your journey, I’d appreciate it if you would consider supporting me using the form below.