Select Page

In this quick tutorial, I’ll show you how you can easily hide or disable the header area in Divi.

The header area is that which includes your logo and menu and position at the top part of your webpages (and, if the “Fixed Navigation” option in the Divi Theme options is turned on, also sticks with you as you scroll through the page).

Sometimes, for a variety of reasons, we may wish to hide the header from our entire Divi site or from a certain page. ElegantThemes unfortunately do not provide a built-in option for doing so via the Divi Theme options, but with a small CSS tweak, everything is possible.

Let’s begin.

Hiding / Disabling the Header in Divi

In this section, we’ll cover the options for hiding your header entirely, disabling the fixed navigation option in Divi, hiding the header on a certain page and hiding it on all blog posts pages.

Hiding the Header in Divi (globally)

If you wish to hide the header area from your entire website, so it is not shown on any webpage, open your child theme’s style.css file, and add the following code in the very bottom of the file. Alternatively, you can open your WordPress Admin Dashboard, navigate to the Divi Theme options and in the bottom of the page, add the following code under the Custom CSS section:

/* Hiding the Divi 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;
}

Hiding the Divi Header only on Desktops

If you wish to hide the header area from your entire website, so it is not shown on any webpage, but only when accessed from desktop devices (meaning, it will still show on tablet and mobile devices), add the following code to your style.css file or to the Custom CSS section in the Divi Theme Options:

/* Hide the Divi Header on Desktop */
 @media all and (min-width: 980px) {
     #main-header {
         display: none;
    }
     #page-container {
         padding-top: 0px !important;
         margin-top: -1px !important 
    }
     .et_transparent_nav #main-content .container {
         padding-top: 58px !important;
    }
}

Hiding the Divi Header only on Blog Posts

If you wish to hide the header area from blog posts only (for instance, if you want to have only a secondary menu available on blog postings), add the following code to your Custom CSS section in the Divi Theme Options (in the WordPress Admin Dashboard), or to your theme’s style.css file:

/* Hiding the Divi Header on Blog Posts Only */
 .single-post #main-header {
     display: none;
}
 .single-post #page-container {
     padding-top: 0px !important;
     margin-top: -1px !important 
}
 .single-post .et_transparent_nav #main-content .container {
     padding-top: 58px !important;
}

Hiding the Header in a Specific Divi Page or Post

If you wish to hide the header area from a specific Divi page or post only, open that page’s Divi Settings, navigate to the Advanced tab, and under the Custom CSS section, paste the following code:

/* Hiding the Divi 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;
}

Disabling the Divi Fixed Navigation Header

If you wish to hide the sticky-header, the one that stays fixed on top as you scroll the page, you can do so directly from within the Divi Theme Options, using the built-in configuration for Fixed Navigation. Open the Divi Theme Options from the WordPress Admin Dashboard, then turn off the option for Fixed Navigation.

Like so:

Wrapping Up

While not available as a built-in feature by Divi, hiding / disabling your Divi website’s header and menu area can be achieved quite easily with the examples shown above. Want to have additional header-related tweaks? Let me know in the comments below.

Happy dev’ing!

 

© 2019 Divi.Best - All rights reserved. Designed by Avi Reiner | Powered by WordPress and Divi