Force the “Centered Inline Logo” header format to use the default hamburger format for the mobile header.

This is a draft tip, meaning that it hasn’t been extensively tested and may not work perfectly.
It is not yet included in Divi Booster, but I hope to be able to do so in the future.

The Divi theme comes with a selection of header formats. These are accompanied by a corresponding mobile header format. There are two mobile formats, the default “hamburger” format, and a format with a dropdown page menu. The latter of these mobile formats, the “dropdown” format is applied when the main header format is “centered”.

But what if you want to use the default mobile header instead. Here’s how to force the default mobile header when using the “Centered Inline Logo” header format.

Using jQuery to Change the Mobile Header Class

The look of the header is controlled by a CSS class on the body element. To get the default mobile menu, we need to ensure that the CSS class is set to “et_header_style_left” on mobiles, instead of the normal “et_header_style_split” set by the centered inline logo header.

The following jQuery dynamically switches the CSS class when the window is resized, ensuring that the correct one is applied.


Preventing the Old Mobile Menu Style from Flashing Up

I found that it was necessary, in the above code, to add a short time delay before applying the class switch initially. To tidy things up, the following CSS can be used to hide the old header style, so that it doesn’t appear briefly prior to the default mobile header being displayed.

Want get more out of Divi?

Hundreds of new features for Divi

in one easy-to-use plugin