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.


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: