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.