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;
}Related Post: Adding CSS to the Divi Theme
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
/* 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
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.
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!
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?
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!
This is great thanks! Is there a way to hide the topbar too?
Hey Nicola, this post should help you do that:
https://divibooster.com/hiding-divis-secondary-menu-bar/
Let me know if it doesn't do what you need. Thanks!
Thank you so very much! Couldn't have done it without your tutorial and code. Truly appreciate you.
You're very welcome, SuzElizabeth!