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
THANK YOU for this!
hi, used it, like the simplicity
the full page sections needed an extra to make the really full page
#main-header { height: 0px; display:none; }
Nice catch. Thanks for sharing it, Stefan :)
Thank you so much !!! I was looking for this gem for hours…
Made my day :)
You are a GOD. Been looking for this fix for hours. Thanks, All the internet points to you.
Hello,
The first code also removes my logo. Is there any way to solve that?
Thanks!!
Hi Sofy, this code is for hiding the entire header. If you just want to hide the menu links (leaving the logo visible), please try this instead:
https://divibooster.com/hide-the-divi-header-navigation-links/
Hi ,
1.I would like to know how to hide the header only on add-on page,
2. when open a addon page the header links are active , i would like to know how to link to header tabs.
Hi yahraa, are you able to send me a link to an example add-on page, so that I can see how you have it set up? Thanks!
Hi i am trying to hide the header but the setting is not opening when i open per page divi builder 3 dots (Setting)
Hi Anam, are you using the visual builder? The instructions above were for the adding per-page CSS in the backend / classic builder. I've updated with instructions for the visual builder / new backend builder too.
I hope that helps, but let me know if not / I've misunderstood what you're trying to do. Thanks!
Hi Dan,
I'd like to make the divi theme header appear again after having inserted the CSS Code you provided. How do I make it appear again? I deleted the CSS code but it still does not appear.
Thanks!
Hi Mat, I can see the header showing up on pages other than the homepage ("kontakt", for example), so I think the CSS code has been correctly removed. I think the reason the homepage isn't showing the header because it is using the "Blank Page" template. If you go to the edit screen for the homepage then in the "Page Attributes" box on the right-hand side you should be able to change the Template to "Default Template" to restore the header. I hope that helps!
Thank you, Dan! It worked, you're my hero =)
Hi Dan
Your seo is working, my menu didnt show and you gave me the answer so thanks im happy now :)
This works for regular pages but not for woocommerces pages. The links are transparent but still there. Is there any way how to fix this please? Thx
i take my previous comment back :) works perfectly, I just by mistake havent realized some of the wordpress settings i made before. thx
Okay, great! I'm glad you figured it out, and thanks for letting me know, Michelle :)
Hi, Is there any way we can replace the default header with divi section built from divi builder?
Hey Jeffrey, this post gives a couple of ways to add a divi section below the header throughout the site:
https://divibooster.com/adding-a-site-wide-divi-builder-layout-below-the-header/
If you combine that with the instructions in this post for hiding the header, you should be able to achieve the effect you want.
Hello,
How to hide menu when scroliing?
Hi Manja, there's a built-in Divi option that should do what you need. Go to "Divi > Theme Options > General > Fixed Navigation Bar", set it to "Disabled" and click "Save Changes". That will prevent the header / menu from being shown when you scroll down. Technically, it doesn't "hide" the menu, but it does make it scroll out of view as you scroll down which pretty much achieves the same effect. I hope that helps!
Thanks guys this worked first time around guys !
I feel like this was sort of answered but not fully. After hours of googling as a self proclaimed googlefu ninja master I can't find exactly how to do this "properly".
I want to remove, replace, or hide (if that's my only option) the built in header menus (primary/secondary) and insert a global fullwidth menu module I created for my blank pages at the top where the divi primary/secondary menu's used to be.
I have a LOT of pages that are not set to blank and it would be ridiculous for me to go in and change them all to blank, then add in the global fullwidth menu one at a time.
Let me clarify that I would much rather find a way to replace the menus inside the header.php file using something like this:
echo do_shortcode('[et_pb_section global_module="30801"][/et_pb_section]');
to change the menu for all pages on my entire site to the fullwidth header section I created in divi libray
Hey Matthew, there are a couple of plugins which will let you add a fullwidth header section from your library to the page. I've linked to them in this quick post I've put up:
https://divibooster.com/adding-a-site-wide-divi-builder-layout-below-the-header/
I'd say that would be the "proper" way to do it. The code you've given will work and I've added some implementation details to that post, but it's worth noting the caveats around how Divi updates are handled.
I don't think there are any suitable action hooks for directly adding the library where you need it, but another possible strategy is to add the section somewhere else in the page and move it with JavaScript. I haven't coded up an implementation of that yet, but I used a similar technique for adding a full-width image above the header, which you might be able to adapt.
check this out… this solves the issue how to apply custom sections via php (e.g. header.php)
https://www.creaweb2b.com/en/add-a-divi-section-inside-page-template/
Thanks for sharing, Michelle :)
Hey Dan,
Quick question
How would you go about removing the header site wide on DESKTOP only?
My situation is, I have an image above my full width menu module, but i disabled the header overall. So on mobile, the header doesnt' show up, and the full width menu doesn't have a description on it.
My ideal solution is, use my menu module on desktop, and then use the divi header/nav menu for mobile.
Thanks for any and all help
Cheers
Hey Tim, the way to do this is using a CSS "media query" to check the screen width and only apply the code given when the screen is sufficiently wide to suggest it is a desktop.
I've added a "Hiding the Header on Desktops only" section to the post which gives the modified code. Let me know if you have any questions about it. Thanks!
Hi Great post! Is it possible to just hide the header in desktop but not tablet or mobile?
Hi Kelly, I've just updated the post with a section on "Hiding the Header on Desktops only". I hope it helps!
Hey Nate,
How can I remove the header from only one page?
Thanks, nathalie
Hi Nathalie, to remove the header from a single page (or post), you can paste the code from this post into per-page "Custom CSS" box, which you'll find from the page edit screen by clicking on the three-lined "hamburger" menu button on the top right of the purple Divi Builder area. CSS placed in that box will apply only to that particular page. If you are talking about another type of "page" (e.g. the homepage or category page), please send me a link to the page you're working on – it should be possible to do with a modification to the CSS given. Thanks!