How to hide the Divi Header and Footer

by Nico Master | Jan 3, 2018 | Divi, Light Side

Hide the Divi header and Footer using the Blank Page Template

You can simply hide the header and the footer by slecting blank page as template under the Page Attributes.

Hide the Divi header for the entire site with CSS

If you don’t want to show Divi’s header that includes the menu and top bar we can easily disable it adding the next CSS under Divi -> Theme options -> Scroll down to see the CSS box:

 /*Hide the Divi Header*/
#main-header { display:none; }
#page-container {
    padding-top:0px !important;
    margin-top:-1px !important;
}

Hide the header for a single post or page with CSS

Otherwise if you want to to just hide the menu in some pages or post you will need to copy the above CSS into your page or post “Custom CSS” box, which you will find in the Divi builder, is a 3 line hamburger icon.

Hide the Divi fixed header

Go to your WordPress Dashboard from there locate Divi -> Theme options
Under general settings you will find an option “Fixed navigation bar”
Set it to disable and save.

Hide the Divi footer with CSS

Hide the Divi footer by adding the next CSS, you can also use this CSS in single pages or posts to hide it just in there like the header.

 /*Hide the Divi Footer*/
#main-footer {
display: none;
}

That was it! A really cool and useful trick for hide the default menu and footer, hope you like it guys and see you soon in the next tutorial :-).

15 Comments

Sandy Rowley on March 29, 2018 at 2:41 am

Do you know how awesome you are? Thank you so much for this!
Reply
- Nico Master on April 7, 2018 at 11:32 am
  
  Thanks to you!! Sandy! Glad to help 🙂
  Reply
Ronda on May 15, 2018 at 11:14 pm

Worked like a charm.
Reply
MattDitto on June 2, 2018 at 1:58 am

AWESOME. It just… worked.
Reply
David Paul on June 6, 2018 at 6:57 am

Thanks Men!
Reply
Edward on July 2, 2018 at 4:15 pm

OH MY GOD! it was so easy! Thank you so much!
Reply
Seb on July 8, 2018 at 11:58 am

I’ve been looking all over for this and here was the answer, THANK YOU!
Reply
bigbiz on July 30, 2018 at 1:50 pm

Hidden attribute Is really bad for seo
how remove in php code ?
Reply
- Nico Master on August 14, 2018 at 6:49 pm
  
  Hey there! You can simply select “blank page” and that should do the trick. Hope it helps!
  Reply
Michael on August 1, 2018 at 4:48 pm

Might there be a manner by which all newly created ‘project’ pages, following the typical page option, to use a blank page template?
Reply
- Nico Master on August 14, 2018 at 6:51 pm
  
  Hey Michael, I belive there is not, but what u could do is to directly add some css to the single-project.php to hide it!
  Hope that helps you out!
  Reply
Dennis on September 24, 2018 at 2:17 am

Excellent, thank you!
Reply
Prince Depaola on November 6, 2018 at 5:47 am

Good comment. Nice.
Reply
john on November 6, 2018 at 7:07 am

Excellent, thank you!
Reply
Bill on January 2, 2019 at 5:09 am

Thank you!
Reply