Hide the Standard Divi Theme Header using Divi Booster
This method explains how to hide the default Divi theme header by utilizing the Divi Booster plugin's built-in header hiding feature. By following these steps, you can quickly remove the standard header across your site without custom code, offering a convenient solution for customizing your site's design.
Access the Divi Booster Settings
To get started, head to your WordPress dashboard. In the left-hand admin sidebar, click on 'Divi' to expand the menu, then select the 'Divi Booster' option to open its settings panel.
Configure Header Visibility
Inside the Divi Booster settings, locate the 'Header' section and click to expand it. Then, find the 'Main Header' subsection and expand that as well. Look for the option labeled 'Hide header completely' and check its box to activate it.
Save Your Changes
Once you've enabled the setting, be sure to click the 'Save Changes' button at the top right of the Divi Booster panel to apply your updates.
Confirm the Header is Hidden
Visit your site's homepage to check that the standard Divi header is no longer visible at the top of your site.
Hide the Standard Divi Theme Header using Custom CSS
This method demonstrates how to hide the standard Divi theme header by adding custom CSS directly into the Divi Theme Options panel. It's a straightforward approach that allows you to visually remove the default header from your site without editing theme files, making it easy to achieve a cleaner look or prepare for a custom header.
Open Divi Theme Options and Locate Custom CSS
In your WordPress dashboard, click on 'Divi' in the sidebar, then choose 'Theme Options.' Once the Theme Options panel appears, scroll down to find the 'Custom CSS' box at the bottom of the page.
Add CSS to Hide the Divi Header
Inside the Custom CSS box, paste the following code exactly as shown. This will remove the standard Divi theme header and adjust the spacing to keep your layout looking its best.
/* 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;
}
Save Your Changes
After pasting the code, don't forget to click the 'Save Changes' button in the top right corner of the Theme Options panel to make your changes live.
Verify the Header is Hidden
Return to your site's homepage and confirm that the standard Divi header is no longer being displayed.
Conclusion
Hiding the standard Divi theme header is easy with either Divi Booster or a quick CSS snippet in Theme Options. Choose the method you prefer and enjoy a cleaner, more custom site layout!
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!