How to Hide the Header and Footer in Divi

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.

You can hide the header and footer for the entire website or just for individual pages or posts. This can be useful for creating landing pages, sales pages, or other types of pages where you don’t want the header and footer to be displayed.

There are different methods to do this depending on if you are using the default header and footer or if you are using the Theme Builder.

This tutorial will show you how to hide the header and footer in Divi. I’ll cover two methods:

• Method 1: hide the default header and menu
• Method 2: hide the header and footer using the Theme Builder

Method 1: Hide the default header and menu

This method is for Divi websites that are using the default header and footer. I have different methods for you depending on what you like to achieve. You just need to place some custom CSS code snippets that I have already created for you.

• Hide the header and footer for an individual page
• Hide only the Divi header for the entire website
• Hide only the Divi header for an individual page
• Hide only the Divi footer for the entire website
• Hide only the Divi footer for an individual page

Hide the header and footer for an individual page

This method will hide both the header and footer for an individual page.

Open the page in the backend where you want to hide the header and footer. On the right, you will find the page attributes, and under the template, you can choose the “Blank Page” template.

With this option, you can hide the header and footer from that page.

Hide only the Divi header for the entire website

This is for websites that are using the default header and you want to hide it for the entire website.

Place the following CSS snippet in Divi > Theme Options > CSS

#main-header { 
	display: none; 
}

#page-container {
	padding-top: 0px !important;
	margin-top: -1px !important;
}

Hide only the Divi header for an individual 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 only the Divi footer for the entire website

To hide the default Divi footer on the entire website you can use this snippet.

#main-footer {
	display: none;
}

Hide only the Divi footer for an individual page

To hide the default footer on an individual page you can use this snippet.

.page-id-1098 #main-footer {
	display: none;
}

Change the ID number with yours the same way as for the header.

Method 2: hide the header and footer using the Theme Builder

If you have created a global header and a global footer in the Theme Builder then this is incredibly easy to hide these.

From your WordPress dashboard navigate to: Divi > Theme Builder.

You can click on the eye icon to hide the header or footer from the front end.

This is for the entire website, if you want to hide it for an individual page then you need to copy the template and assign it to an individual page or post.

Follow these steps to do that:

Click on Add New Template > Build New Template.

Then assign this template to your page or post.

You can use any of the options here but if you want to assign it to a specific page then hover over Specific Pages and choose your page.

Then click on Create Template.

The template will still have the global header and footer so you have to disable the global function.

Click on the 3 vertical dots and then on Disable Global.

The global header will change to a custom header and now you can hide this for the page or post you have it assigned to.

Conclusion

In conclusion, there are two methods for hiding the header and footer in Divi: using the Divi Theme Builder or using CSS. The Divi Theme Builder is a more visual method while using CSS is a more technical method.

Both methods are effective, and the best method for you will depend if you are using the default header and menu or if you have created a global header and menu in the Theme Builder.

I hope this tutorial has been helpful. If you have any questions, please feel free to leave a comment below.

You Might Also Like…

• How to Create a Custom Divi Header
• How To Fix Divi Jumping Header
• How to Remove or Change the Divi Header Shadow
• How To Speed Up Your Divi Website (Guide)
• How to Make a Divi Child Theme