New Plugin: Divi Show / Hide Button Module

Hide the Divi Theme Header

The Divi Theme comes features a prominent, responsive header bar. If you don't want to show this bar on your site, you can completely hide it using the following CSS code:

/* Hide the header */
#main-header { display:none; }
#page-container { 
	padding-top:0px !important; 
	margin-top:-1px !important 
}

/* Adjust padding for transparent headers */
.et_transparent_nav #main-content .container {
    padding-top: 58px !important;
}

Related Post: Adding CSS to the Divi Theme

Alternatively, you can use my plugin Divi Booster to hide it for you. Once installed, all you need to do is go to the plugin settings page, enable the "Header > Main Header > Hide header completely" option and save. The header should now be gone!

Get Divi Booster

Hiding Divi's Fixed Header Only

See this post if you just want to stop the navigation bar from hovering over the page.

Hiding the Divi Header on a Single Post / Page

To remove the header from a single page (or post), you can paste the code given at the start of the post into per-page “Custom CSS” box, which you’ll find as follows:

Visual Builder – Click on the purple "…" menu button, then on the purple "cog" icon and navigate to "Advanced > Custom CSS" in the Page Settings box that appears.

Backend Builder – Click on the purple "cog" icon and navigate to "Advanced > Custom CSS" in the Page Settings box that appears.

Classic Editor – On the page edit screen, click on the three-lined “hamburger” menu button on the top right of the purple Divi Builder area. Place CSS into the Custom CSS box in the menu that appears.

CSS placed in these boxes will apply only to that particular page.

Hiding the Header on Desktops only

If you want to hide the header on desktop displays but keep the mobile header visible on mobiles / tablets, you can do so with the following CSS code:

/* Hide the header on desktop only */
@media only screen and (min-width: 981px) {
	#main-header { display:none; }
	#page-container { 
		padding-top:0px !important; 
		margin-top:-1px !important 
	}

	/* Adjust padding for transparent headers */
	.et_transparent_nav #main-content .container {
		padding-top: 58px !important;
	}
}

Related Post: Adding CSS to the Divi Theme

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

More Divi Tips

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

Download Divi Booster

95 Comments

← Older Comments

SuzElizabeth on February 13, 2021 at 3:01 pm

Thank you so very much! Couldn't have done it without your tutorial and code. Truly appreciate you.
Reply
- dan on February 15, 2021 at 5:12 am
  
  You're very welcome, SuzElizabeth!
  Reply