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 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>
Related Post: Adding JavaScript / jQuery to Divi.
Preventing the Old Mobile Menu Style from Flashing Up
<style>
@media only screen and (max-width: 980px) {
.et_header_style_split #main-header { visibility:hidden; }
}
</style>
Related Post: Adding CSS to the Divi Theme
Want get more out of Divi?
Hundreds of new features for Divi
in one easy-to-use plugin
Hi, something's wrong with the line-height in this article here…
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!
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.
Perfect! Absolute life saver! I added it to my client's blog here: http://madewithjoy.co.uk
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.
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 :-)
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 :)
¿Where put code script in divi?
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.
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 :(
the website is http://www.dogstars.es
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 *).
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);
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; }
}
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.
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?
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.