In some cases, you might want to hide the Divi header and footer on a certain page or for your entire website. For example, on a landing page, you might want to hide the header for less distraction.
In this tutorial, I will be covering how you can accomplish this.
Hide the Divi header and footer with the blank page option
Open the page in the backend which you want to hide the header and footer. On the right, you will find the page attributes and under template, you can choose Blank Page.
With this option you can hide the header and footer from that page.
Hide the Divi header
For the entire website
If you want to hide the header from the entire website you can use this snippet.
Place this snippet in Divi > Theme Options > CSS
#main-header {
display: none;
}
#page-container {
padding-top: 0px !important;
margin-top: -1px !important;
}For a particular page
If you want to hide the header from a particular page you can use the following snippet.
.page-id-1098 #main-header {
display: none;
}
.page-id-1098 #page-container {
padding-top: 0px !important;
margin-top: -1px !important;
}You need to change the page-id number with yours. You can find the page-id number by going to your page in the backend and from the URL you will find your ID number.
Hide the Divi footer
For the entire website
To hide the footer on the entire website you can use this snippet.
#main-footer {
display: none;
}For a particular page
To hide the footer on a particualr page you can use this snippet.
.page-id-1098 #main-footer {
display: none;
}Change the ID number with yours same way as for the header.
I have seen so much incorrect advice on how to do this and have been going mad for an hour trying to do this!
THANK YOU so much, worked perfectly!
After so many advices and tips that didn’t work, you’ve saved my day. Thank you!
Its working Perfect for me Thanks for this code
Found this article searching for how to remove the header/footer from a specific page. I was expecting to have to use some code or CSS but the page attribute setting is too obvious simple. Thanks for saving me a bunch of time and headache!!
This worked even for me, thanks!
where do i place the code?
Hi Shelbee,
You can place that snippet in Divi > Theme Options > CSS
So how do I hide header in multiple pages like 5 pages without repeating the code?
Hi,
You can do it like this:
.page-id-1098 #main-header,
.page-id-2085 #main-header {
display: none;
}
.page-id-1098 #page-container,
.page-id-2085 #main-header {
padding-top: 0px !important;
margin-top: -1px !important;
}
This is an example for 2 pages.
Notice how I added a (,) after the first page.
Worked like a charm, thank you!
Thanks,
Mark you work for Divi is Remarkable. Thanks for all of this
Where do you find the page id if you use permalinks?
Hi John,
View your page in the source code. In the body tag you will find your page ID something like this page-id-???? the ???? is your ID number
Why do I have a large empty space at the top of my site every time I try this?
Probably a 50-60px empty gap. If I minus margins I can close it but I’d soon not have to resort to that.
Any help would be appreciated!
Hi Keith,
Seems you have an empty section at the top of your site.
If you send me a link of your site then I have a look for you.
The above code is what is causing it (padding-top: 114px) but how do I fix it?