Use Default Mobile Menu with the Centered Inline Logo Header

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.

<script>
(function($) {
	function resize() {
		$window = $(window);
		$body = $('body'); 
		if ($window.width() < 981) {
			$body.addClass('et_header_style_left');
			$body.removeClass('et_header_style_split');
		} else {
			$body.removeClass('et_header_style_left');
			$body.addClass('et_header_style_split');
		}
	}

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

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.
<style>
@media only screen and (max-width: 980px) {
	.et_header_style_split #main-header { visibility:hidden; }	
}
</style>

Want get more out of Divi?

Hundreds of new features for Divi
in one easy-to-use plugin

17 Comments

  1. Hi, something's wrong with the line-height in this article here…

    Reply
    • Hey Domin, thanks for letting me know. It looks like Divi's CSS caching was playing up – I've cleared the cache and that seems to have sorted it out. Hopefully you can see it correctly now, but please let me know if the line-height is still looking wrong to you. Thanks!

      Reply
  2. 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
  3. 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
  4. 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
    • 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
  5. ¿Where put code script in divi?

    Reply
    • 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
      • 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
          • 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 *).

  6. 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
    • 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
      • 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
        • 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
          • 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

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

17 Comments

  1. Hi, something's wrong with the line-height in this article here…

    Reply
    • Hey Domin, thanks for letting me know. It looks like Divi's CSS caching was playing up – I've cleared the cache and that seems to have sorted it out. Hopefully you can see it correctly now, but please let me know if the line-height is still looking wrong to you. Thanks!

      Reply
  2. 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
  3. 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
  4. 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
    • 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
  5. ¿Where put code script in divi?

    Reply
    • 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
      • 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
          • 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 *).

  6. 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
    • 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
      • 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
        • 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
          • 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

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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