Hide the Divi Theme Header

Written by Dan Mossop

The Divi Theme comes features a prominent, responsive header bar. If you don't want to show this bar on your site, this post describes how to hide it.

Note: I've got a separate post on how to hide the top header / secondary menu bar (that's the thin bar at the very top of the page, which contains the phone, email and social icons.

Hide the Main Header using Divi Booster

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!

Hide the Main Header using CSS

You can alternatively 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;
}

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;
	}
}

Customize Divi with Ease Using Divi Booster!

Easily customize your Divi site with Divi Booster. This powerful tool allows you to hide elements like the main header, refine the design, and much more without touching a single line of code. Perfect for those looking to tailor their Divi theme effortlessly.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

105 Comments

  1. Hi guys!

    How do you hide the menu on a specific section scrolling down the page. Example: you have a full width image and want the header completely gone scrolling down the image and reappear after the image

    Reply
  2. Perfect. Thank you

    Reply
    • You're welcome, Gayle :)

      Reply
  3. Hi,
    Is there a way in Divi to hide the main menu, top menu and footer on all post pages?
    Like a global option that can be applied to an entire site?
    I am trying to iframe all posts from an old site (700 posts) into a new site.

    Reply
    • Hi Damien,

      Try adding this to "Divi > Theme Options > General > Custom CSS":

      #top-header, #main-header, #main-footer {
      	display: none !important;
      }
      

      An alternative would be to use the Divi Theme Builder. Create a template, assign it to all posts, and give it a custom header and footer, both set to the default blank layout. The blank layout will still have an empty section in it, so you might need to disable its visibility in the section's settings.

      Hope that helps!

      Reply
      • Thanks, Dan.
        That is super helpful indeed.

        I will try option 1 to start with.
        In regard to option 2, how do you assign a page template to all posts?

        Reply
        • You're welcome, Damien. You can assign a page template to all posts from the "Template Settings" menu, shown in the first screenshot in ET's Divi Theme Builder post (same post as I linked to in my earlier comment). The menu will automatically open when you click to add a new template (on "Divi > Theme Builder"), or you can open it by hovering over an existing template (again in "Divi > Theme Builder") then clicking the settings "cog" icon that appears above the template. Once the "Template Settings" menu is open, click on the "All Posts" option and save. Hope that makes sense, but let me know if not. Cheers!

          Reply
  4. This is great thanks! Is there a way to hide the topbar too?

    Reply
  5. Thank you so very much! Couldn't have done it without your tutorial and code. Truly appreciate you.

    Reply
    • You're very welcome, SuzElizabeth!

      Reply

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 *.

We may earn a commission when you visit links on our website.