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
Thanks, this was a huge help to me and worked really well.
Hi, I just copied and pasted the code in the custom css area and no change. Help!
Actually, it sort of worked, but not fully. The new header didn't take the place of where the other header was and you can still see the old header, it's just smaller.
Hi Margaret, I'm not sure if I'm understanding correctly / seeing what you're seeing, but at the moment I can see the header with the logo and above that is the top header with the social icons. Is this part with the social icons that you want to get rid of?
If so, you should be able to do so with the following CSS:
#page-container .top { display: none !important; }But please let me know if that doesn't do what you need.
Thanks!
Complete NOOB question. Where does the code go? :0
Hi Mike, there are various options, but the easiest is probably to paste it into the Custom CSS box at "Divi > Theme Options > General > Custom CSS".
How can I keep the logo and search icon intact and simply remove all navigation menus? I have tried removing them from Menu page in Wordpress but it still populates the latest pages.
Here is my website:
http://wordpressmu-95891-271328.cloudwaysapps.com
Hi Muhammad,
It's a bit of a tricky one. As you can see if you put an empty menu in that spot, Divi defaults to adding links to all pages not explicitly excluded in the theme options which means new pages get added. One option is to hide the navigation menus with this CSS:
#top-menu-nav { visibility: hidden; } #et_mobile_nav_menu { visibility: hidden; width: 0; } #et_top_search { margin-right: 0 !important; }which you can paste into "Divi > Theme Options > General > Custom CSS".
I'd like to figure out a better way in the future (i.e. a way to stop that default behavior of adding links), but hopefully that CSS will help you in the meantime.
Thank you!
I changed padding-top: 58px !important; to 0px coz I don't want header completely :)
You're welcome, Adrian. I've just updated the code to restrict that top padding to sites that actually need it – i.e. those with transparent headers. So the full code should now work everywhere without modification. Thanks!
I've done this and removed the header. Now I want it back the way it was. How do I do it?
Nevermind. I figured it out.
Hi,
I've added the code to the CSS of the individual page that I wish to hide the menu – ours is a menu down the right side of the page and is leaving a gap i think similar to the issue Nate Heath was having. How do I fix this?
Thanks
Hi Lauren, did you try the CSS I suggested to Nate? If you're still getting the gap after adding it, are you able to send me a link to the page you're working on so that I can take a look? Thanks!
Is there a way to hide the main header on one page only? I was going to use the blank page template but I still want the footer to appear on the page. Any ideas?
Hi gwhoddinott84, Divi has an option to add custom CSS to a single page. If you go to the page edit screen you should see a three-lined "hamburger" menu in the top right corner of the purple Divi Builder area. Click on this and you'll find a "Custom CSS" box. Paste the code from this post into that box and it should be applied just on that one page. Hope that helps!
Still having this issue, any thoughts?
There seems to be some space left on posts after turning off the header and hiding #top-header, it seems fine on pages. Is there some more code that needs to be added?
I checked CSS between a page and a post, vs. your code and didn’t see anything that would make a difference.
http://noliftsystem.com/weighty-subject-heavy-topic
Hey Nate, try adding this CSS in "Divi > Theme Options > General > Custom CSS":
body.single #main-content .container { padding-top:0px !important }This will override the 58px padding added by my own code, which is the cause of the gap. I originally added the 58px padding to handle a case where the header has a transparent background, but I'm not sure exactly why it was necessary. When I'm less tired I'll sit down and work out why / how to get the code working in all cases :) Let me know if that extra code doesn't fix it for you. Thanks!
That did it, thanks!
That work pefect ! Thanks Dan
Is there a way to hide the menu on JUST the individual post pages? I can't seem to target only the posts pages.
Hi Krystal, to hide the header on all posts, and only on posts, you should be able to do:
.single-post #main-header { display:none; }Hope that helps!
Actually, is just select "Blank Page" as page template.
That's a good way of doing it, Anderson. It's worth noting that this option is only available on pages (not posts) and will remove both the header and footer. Thanks!
Hi I am using divi popup modal and want to hide the page header only when the event is triggered using popup modal and unfortunately this code is not working for me any help on this is really appreciated
Thanks
Hi Ali, is there any chance you can send me a link to the page your working on, so that I can see how you have it set up at the moment? Cheers!
Hi Dan,
Thanks for your response. I am actually working on a local host at the moment. But I think I have worked it out, just by adding and extra line "#top-header { display:none; }" it's gone (it seems the secondary menu is the top header and the other is the main header). The weird thing is that secondary menu was only displaying statically on pages that did not have much content … but I think I have fixed it thanks! Regards, Ali
Okay, great! Yeah, that's right, the secondary header / menu also gets called the top header and the CSS code you are using is the right thing to hide it. My code on the other hand is for hiding the main header only.
There seems to be some space left on posts after turning off the header and hiding #top-header, it seems fine on pages. Is there some more code that needs to be added?
I checked CSS between a page and a post, vs. your code and didn't see anything that would make a difference.
http://noliftsystem.com/weighty-subject-heavy-topic
Hey Nate, I've just updated the code to fix this. That extra padding is only needed when transparent headers are used, and the code now checks for transparent headers before applying the padding. Thanks!