The Divi Page Builder, has become my least favourite wordpress page builders over the years. It started off as one of the best, but over the years, as it tried to emulate other page builders, it became slower and clunkier by the update.

Until, recently, I cannot bear to login to a wordpress site and use it. 

But this article is about fixing the horrific attempt of Divi to create a sticky mobile menu. 

If you create a sticky mobile menu, when you scroll on the page, Divi will automatically re-size that menu however it sees fit. I’ve dug into the css and I can’t figure out what exactly it’s doing. Two hours later, I didn’t really care. I just wanted an alternative solution.

So, I turned off the sticky menu altogether for mobile devices. Instead, in the Global Header, I set the Section that contains my mobile only header elements to “Fixed position“. Simple as that.

Then, to push the actual page content down below the header, I added a new Section under the Fixed Section (above), put a “divider” module in it and hid the divider. Added -12px of  top-margin to the Section and it all lined up perfectly. No gaps and my page content sat nicely under my Fixed header.