Nowadays websites become essential for any business to show out the products to the people. Most of the designers prefer WordPress CMS. It is SEO friendly and powerful tool for website creation and blogging. So Let us see how to disable/hide divi header for a particular page in the website.

In Divi, there is an option like disable header part for the whole website. There is no option to disable header in a single post or a page. To achieve this, we have to go for CSS. By using this css you can completely hide the top header part of the particular page or post in the website.

How to Disable Divi Header for Particular Page

With Header

CSS Code to Disable only Menu Part (Header):

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

.et_transparent_nav #main-content .container {
padding-top: 58px !important;
}
Place the above CSS code in the CSS part of the page/post which you want to hide header. There is a three lined hamburger menu in divi page/post editor, in that you can place the code.

 

CSS Code to Disable Only Secondary Menu Part:

#top-header {
display:none; }
.et_transparent_nav #main-content .container {
padding-top: 58px !important;
}

If you want to disable both top header and main header, combine the above CSS codes together like,

#top-header { display:none; }
#main-header { display:none; }
#page-container {
padding-top:0px !important;
margin-top:-1px !important
}
.et_transparent_nav #main-content .container {
padding-top: 58px !important;
}

disable header for paticular page

Without Header

CSS Code to Disable Header only in Desktop:

If you want to disable the header part only in desktop view, simply paste the following code in the CSS part of the particular page or post you want to disable.
@media only screen and (min-width: 981px) {
#top-header { display:none; }
#main-header { display:none; }
#page-container {
padding-top:0px !important;
margin-top:-1px !important
}
.et_transparent_nav #main-content .container {
padding-top: 58px !important;
}
}

 

CSS Code to Disable Header only in Mobile:

Use this CSS code to disable header in mobile
@media only screen and (max-width: 981px) {
#top-header { display:none; }
#main-header { display:none; }
#page-container {
padding-top:0px !important;
margin-top:-1px !important
}
.et_transparent_nav #main-content .container {
padding-top: 58px !important;
}
}

With the help of the above codes, you can disable headers in as many posts or pages in your website.