The Ultimate Divi Bundle - 5 Divi plugins. 1 great price.
Learn More

Use Default Mobile Menu with the Centered Inline Logo Header

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

10 Comments

  1. Isabel

    Thanks so much for sharing this, this was exactly what I needed to get my site how I actually wanted it. So happy I didn’t have to compromise.

    Reply
  2. Christina

    Oh this is exactly what I have been looking for and desperately want it to work… but no matter what I try it just won’t 🙁 Any ideas? I’ve put the exact codes into the head and even tried putting it in the css and nothing. I even tried dan’s code above. I seriously dislike the “select page” menu, but love the centered logo desktop version. I must be missing something…hmmm
    Thanks for posting the code. If I can’t get it to work, I will be looking forward to it being added to the divi booster… that will make it a for sure sale for me 🙂

    Reply
    • dan

      Hey Christina, is there any chance you’re able to send me a link to the site you’re working on so that I can take a look and see if I can spot the problem?

      I’ll do my best to get this into Divi Booster in the near future 🙂

      Reply
  3. Melissa

    ¿Where put code script in divi?

    Reply
    • dan

      Hi Melissa, there are a few options (see the “Related Post” links for full details), but the easiest way is probably just to paste both the jQuery and CSS code into “Divi > Theme Options > Integrations > Add code to the < head > of your blog”, after anything else in the box. I hope that helps.

      Reply
      • Melissa

        Hi! Thanks!
        I put the code and it works!
        But preload the other header, logo center in line.
        I put the code css in divi css custom:
        @media only screen and (max-width: 980px) {
        .et_header_style_split #main-header { visibility:hidden; }
        }

        But it not work 🙁

        Reply
          • dan

            Hi Melissa, I think the problem is with the comment added before the code:

            */Cabecera movil*/
            @media only screen and (max-width: 980px) {
            	.et_header_style_split #main-header { visibility:hidden; }	
            }
            

            The “*/Cabecera movil*/” line should be “/*Cabecera movil*/” (swapping the position of the first / and *).

  4. Deuns26

    Thx
    for force the default mobile header when using the “Centered Logo” header format
    change (‘et_header_style_split’) (‘et_header_style_centered’)

    (function($) {
    function resize() {
    $window = $(window);
    $body = $(‘body’);
    if ($window.width() < 981) {
    $body.addClass('et_header_style_left');
    $body.removeClass('et_header_style_centered');
    } else {
    $body.removeClass('et_header_style_left');
    $body.addClass('et_header_style_centered');
    }
    }

    setTimeout(function(){
    $(window)
    .resize(resize)
    .trigger('resize');
    }, 100);
    })(jQuery);

    Reply
    • dan

      Thanks Duens26! I was guessing that would be the way to do it – though I hadn’t tried it out 🙂

      The CSS would also need to have “et_header_style_split” changed to “et_header_style_centered”, like so:

      @media only screen and (max-width: 980px) {
      .et_header_style_centered #main-header { visibility:hidden; }
      }

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *