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

15 Comments

  1. Ryan

    Worked perfectly for me. Thank you much! When I added the css, my logo disappeared so I just eliminated the css and it works great. You saved me a LOT of time.

    Reply
  2. 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
  3. 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
  4. 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 *).

  5. 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
      • Stephen

        Hi Dan,

        I tried the version for the centred logo as outlined by Deuns26 but no result. I tried the version for the split version and it did work.

        Have you tried and verified that it works?

        I have recently looked at the Flatsome theme and the options for configuring the header are far more extensive than what Divi offers.

        Reply
        • Stephen

          Sorted, Whatever copy and paste I did from Deuns26's code there was a problem with the word 'centered'. My spell check marked it as wrong and when I retyped it, everything was good to go. Any idea why this happens?

          Reply
          • dan

            Hey Stephen, I'm not sure if this is cause of the problem you were having, but looking at Deuns26's code I could see that a couple of the quotes had got messed up in the comment. I've corrected these and the code seems to be working now.

Submit a Comment

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