🎁 Get Up To 70% Off and a Free Prize During Divi Black Friday Sale! Get Divi

Turn Divi Default Header Into Centered Header On Mobile

Blog, Divi Tutorial | 0 comments

In this short tutorial I will show you how to turn the default header in the Divi theme to the centered header on mobile phones and tablets.

The default header has the logo on the left and the hamburger menu icon to the right. While the centered header has the logo in the center and the menu under it with the text Select Page inside it.

Below are screenshots of how both the headers look. The default header looks like this screenshot.

Divi Default Header
Divi Default Header

And the centered header looks like this.

Divi centered header
Divi Centered Header

We will be turning the first image into the second image.

Add jQuery Code to Theme Options

Turning the default header to the centered header for phones and tablets is really simple.

Please add the following piece of code at your WordPress Dashboard > Theme Options > Integration > Add code to the < head > of your blog

<script>
jQuery(function ($) {
	$(document).ready(function () {
		if ($(window).width() < 981) {
			$('body').removeClass('et_header_style_left');
			$('body').addClass('et_header_style_centered');
			$('#et-top-navigation').css('padding-left', '0px');
		}
	});
});
</script>

If you are not sure where to add the code, then here is a screenshot to help you.

Divi Theme Options jquery

That’s it adding the code in the Theme Options should should show the centered header instead of the default header on tablets and phones.

However if you only want the code affect Phones and leave the default header on Tablets then it can be done by editing the code above.

You will notice the 981 value inside the code at the line $(window).width() < 981. The 981 is the width when the code will change the default header in to the centered header.

If you want to change it so that the code only works on phones then you can change the 981 value to 481. So the new code will be.

<script>
jQuery(function ($) {
	$(document).ready(function () {
		if ($(window).width() < 481) {
			$('body').removeClass('et_header_style_left');
			$('body').addClass('et_header_style_centered');
			$('#et-top-navigation').css('padding-left', '0px');
		}
	});
});
</script>

Leave a comment below if you found this helpful or have any questions. Don’t forget to subscribe to the Newsletter to receive the latest tutorials in your inbox.

About the Author

The author of learnhowwp.com is a WordPress expert with over a decade of experience, specializing in Divi. Since 2014, they have built numerous WordPress sites and developed 8 Divi plugins with over 30,000 active installations. A former support team member at Elegant Themes, they launched learnhowwp.com in 2020 to share their in-depth knowledge of Divi. Now home to over 65+ articles dedicated to Divi tutorials and insights

0 Comments

Submit a Comment

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

Our Plugins Are Already Being Used On 30,000+ Amazing Websites.

We offer a 30 Day Money Back Guarantee on all plugins, so joining is Risk-Free!