/* Hide the header */
#main-header { display:none; }
#page-container {
padding-top:0px !important;
margin-top:-1px !important
}
/* Adjust padding for transparent headers */
.et_transparent_nav #main-content .container {
padding-top: 58px !important;
}
Related Post: Adding CSS to the Divi Theme
Hiding Divi's Fixed Header Only
Hiding the Divi Header on a Single Post / Page
To remove the header from a single page (or post), you can paste the code given at the start of the post into per-page “Custom CSS” box, which you’ll find as follows:
Visual Builder – Click on the purple "…" menu button, then on the purple "cog" icon and navigate to "Advanced > Custom CSS" in the Page Settings box that appears.
Backend Builder – Click on the purple "cog" icon and navigate to "Advanced > Custom CSS" in the Page Settings box that appears.
Classic Editor – On the page edit screen, click on the three-lined “hamburger” menu button on the top right of the purple Divi Builder area. Place CSS into the Custom CSS box in the menu that appears.
CSS placed in these boxes will apply only to that particular page.
Hiding the Header on Desktops only
/* Hide the header on desktop only */
@media only screen and (min-width: 981px) {
#main-header { display:none; }
#page-container {
padding-top:0px !important;
margin-top:-1px !important
}
/* Adjust padding for transparent headers */
.et_transparent_nav #main-content .container {
padding-top: 58px !important;
}
}
Related Post: Adding CSS to the Divi Theme
Thank you so very much! Couldn't have done it without your tutorial and code. Truly appreciate you.
You're very welcome, SuzElizabeth!