How to hide the Divi header or footer

Divi comes with a header and footer that will be displayed by default on every page of your website.

The header and footer can be hidden together or individually on any or all pages as required.

1. You can remove the Divi header and footer on a specific page by manually selecting the blank page template when creating a page.
2. You can remove the Divi header and/or footer on any selected page or post by using the Divi Theme Builder to create and set templates with or without the header and footer elements.
3. You can hide the Divi header and/or footer on any selected page or post by using custom CSS

1. Remove the Divi header and footer using the blank page option

In most cases, you will simply want to remove both the Divi header & footer from a particular page.

This would be used for a landing page or sales page where the user should not be distracted by header or footer navigation options so that they are more likely to convert to signup or purchase.

This is very quick and easy to implement on specific pages as required.

To hide both the header and footer from the page in Divi you will need to;

1. Add a new page, or choose to edit an existing page.
2. In the right-hand page options scroll down to the Page Attributes
3. Under Page Attributes, set the Template dropdown to Blank Page
4. This will completely remove both the header and footer from your page

2. Remove the Divi header and/or footer with the Theme Builder

The Divi Theme Builder is a template system within Divi that allows you to use the Divi Builder to create templates and assign them to any pages or posts on your website.

You can use the Divi Theme Builder to create a template that will be selectively assigned to your website using the Template Settings checkboxes. You can set the template to Hide On or Exclude From any pages or posts you choose.

Within your new template, you can then use the Hide On Front End (eye icon) option to hide the Divi header, the Divi footer, or both the header and footer. This will hide the Divi primary menu & secondary menu and/or the Divi footer area & bottom bar.

Note – If you want to apply your hidden header and/or footer on your entire website you can simply click on the Hide On Frontend icons within the Default Website Template, but you will most likely want to apply to a selected page and/or post, or to a group of selected pages and/or posts. To do this you can create a new Theme Builder template.

To create a custom template to hide the header and/or footer you will need to;

1. Go to Divi in your WordPress dashboard and click on the Divi Theme Builder menu item
2. In your Theme Builder dashboard click on the + icon to create a new Theme Builder template
3. The Template Settings window will pop up and you can select the pages/posts you want to apply the template to by checking the Use On checkboxes. You can also use the Exclude From tab checkboxes to specify any pages/posts the template should not be used on
4. Chose where to apply your new template and click on the Create Template button
5. To hide your Divi header on pages and posts assigned to this template, click on the eye icon adjacent to your Add Custom Header title.
6. To hide your Divi footer on pages and posts assigned to this template, click on the eye icon adjacent to your Add Custom Footer title.
7. Click the Save Changes button and your headers and/or footer will now be hidden

3. Hide the Divi header and/or footer with CSS

If you are using the default Divi header and footer you can simply add some custom CSS to Divi to hide either or both on all or any pages on your website.

To hide the Divi header on all pages you will need to;

Add the following custom CSS code in Divi > Theme Options > CSS or into your Divi child theme.

#main-header {
display: none;
}
#page-container {
padding-top: 0px !important;
margin-top: 0px !important;
}

To hide the Divi header on a specific page you will need to;

Add the following custom CSS code in Divi > Theme Options > CSS or into your Divi child theme.

.page-id-xxxx #main-header {
display: none;
}
.page-id-xxxx #page-container {
padding-top: 0px !important;
margin-top: 0px !important;
}

The page-id indicated with “xxxx” above needs to be changed for the page id number for the page you want to use the CSS on. The page-id can be seen by editing your page in the backend and looking at the URL in your browser where you will see your pageid=.

To hide the Divi footer on all pages you will need to;

Add the following custom CSS code in Divi > Theme Options > CSS or into your Divi child theme.

#main-footer {
display: none;
}

To hide the Divi footer on a specific page you will need to;

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

Again, the page-id indicated with “xxxx” above needs to be changed for the page id number for the page you want to use the CSS on. The page-id can be seen by editing your page in the backend and looking at the URL in your browser where you will see your pageid=.

Final Thoughts

There are always many ways to perform a task with Divi and hiding the header or footer is no exception. This website uses the default Divi header and footer (rather than the Theme Builder) so when I need to hide the header or footer I use the blank page template or the CSS options.

While it is easy to just remove the header or footer, you may want to just make the Divi header transparent so that it is more subtle on the screen at least until the user starts scrolling. As always with Divi, there are always many options available to you.

Many Divi websites use the Theme Builder to create their header layouts for the Theme Builder and global custom footer and for these sites, it is very easy to use the built-in options to decide what header and footer templates are assigned to what pages or posts. |You can then make your Divi 4.0 header sticky or fixed or any other number of custom navigation edits.

Drop a link in the comments if you have a great custom header or footer.