[Limited Time Offer] Get 40% off MEMBERSHIP PLUS before it's gone! 👉Get This Deal
Mark Hendriksen Logo

How to Hide the Header and Footer in Divi

Mark Hendriksen | May 19, 2023 | 20 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

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

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.

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.

Hide the header and footer with the blank page option

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.

Find the page id number

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

#main-footer {
	display: none;
}

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.

Hide the Divi header and footer in the theme builder

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.

Add 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.

Assign template

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.

Disable global header and footer

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.

Disable global and hide on front end

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…

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

20 thoughts on “How to Hide the Header and Footer in Divi”

  1. 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!

    Reply
  2. 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!!

    Reply
    • 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.

      Reply
    • 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

      Reply
  3. 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!

    Reply
    • 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.

      Reply
  4. Thanks Mark, works great. Hide header and or footer with this small code snippet(s) is probably the easiest and fastest way to make sure that default header/footer isn’t showing up on any page.

    Reply
  5. Hi,

    with wp6.3.2 and divi 4.23.0 and a child-theme for divi, … i don’t see now the template choise … ?
    I try to see wp options/settings on gutemberg ; divi options ; …… no.
    I work with divi and wp since a long time and still have this setting in lateral bar but now i don’t know why, this option not appears.
    Do you know why ?
    Thanks !
    Gilles

    Reply
    • Hi Gilles,

      I have noticed that too with Divi. I think that option has been removed and you now have to do it within the Theme Builder.

      Reply

Leave a Comment

2 Shares
Share2
Pin
Tweet