Select Page

How to Hide & Remove Divi Header

  1. Home
  2. »
  3. Divi
  4. »
  5. How to Hide & Remove Divi Header

Mozsteps content is free. When you purchase through referral links on our site, we earn a commission. Learn More

remove divi header
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

As long as you landed on this article, I am assuming you're trying to remove the Divi header but you're stuck and don't how.

There are cases where many people want to remove the navigation header either on all the pages across their site or on specific pages but sometimes, the process can be very difficult to do particularly if what you are looking to do is not found in any of the default settings provided by the theme.

Speaking about hiding the navigation header of your website, the Divi theme comes with some settings that allow you to remove the header on fixed navigation but it's too limited if you're trying to remove it on the whole site or on specific pages so you'll need to use some custom CSS code to achieve that.

In today's guide, we are going to learn exactly how we can remove Divi header anywhere on your website explaining all details step by step.

I am ready, If you're ready … Let's Do it!

Before we start

It might sound weird why would someone remove the header that contains the brand logo and the menu links but the reality is there are some cases where you or your clients need to get rid of the header to achieve your idea.

1 – Why Remove Divi Header?

Here are some reasons you would need to remove Divi header:

Creating a landing page: if you're an affiliate marketer promoting products and you're using landing pages quite often, you'll need a simple landing page design and you'll have to remove the header and maybe the footer because in most cases they don't make sense and there is no links or other content to put in there.

Creating custom layout: you might have created another custom header and you want to remove the default one and use the one you have designed instead.

You don't need across the site: you might like to remove the header in some specific pages like 404 page or something like that.

Hide & Remove Divi Header (Options Guide)

Here we are in the actionable part of this free guide where we'll be explaining in detail how you can remove divi header globally from your website or even from a specific area in your website.

All the options explained below follow the same concept of adding custom CSS to avoid repeating the same steps I am going to explain here.

In order to add a custom CSS snippet code to your Divi theme always follow these steps:

1 – First after you login into your WordPress dashboard. on the very bottom of the left-hand side menu hover over “Divi” then click “Theme options”

add custom css to divi theme
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – From the Divi theme options panel, click on the “Integration” tab, make sure the “Enable header code” option from the code integration list is enabled then go ahead and paste the custom code as shown below.

add custom css to divi theme
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

3 – When you make any change to the styles found in the custom CSS box or added new ones always make sure you save the changes by clicking the “Save Changes” button located in the very bottom left of the panel or in the top left corner.

divi save changes
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Now that you know how to add custom CSS. Let's give it a shot and see what we can do (:

1 – Remove Divi default Header site wide

The option in the list concerns hiding the Default Divi Header globally across your website is the easiest one to do. so if you're looking to just get rid of the header from the whole website then the following steps are for you.

Here are simples steps to remove the default Divi Header site-wide you can use the custom CSS code below.

<style>
 #main-header { 
	display: none; 
}
</style>

As you can see I have followed the same steps we mentioned earlier and added the custom CSS code in its place.

divi remove header
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – Remove Divi Header on All pages

Now, let's suppose you have encountered a situation where you want to remove the header from all the pages only and leave it in the rest of the site. is that possible?!

Yes definitely!

Here are the steps to remove the navigation header on all pages, you can use the following CSS code snippet

<style>
.page-template-default #main-header 
{
   display: none;
}
</style>

Let's level up the game! and try to target a single page.

We can easily do that by knowing a simple trick which is the fact that every post we create inside WordPress has a unique ID number which the same that appears as a class to the <body> tag. You can know the edit by going to “Pages” and clicking on “Edit” for that particular page than looking at the link that appears in the browser address bar.

Here's in example of what I mean, the ID is placed right after the post= which is 4 in my case.

wordpress page link
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

By knowing that the puzzle is solved. You can now target the page you want by using the following CSS snippet and changing the letter “X” to your page ID number.

<style>
.page-id-X #main-header 
{
   display: none;
}
</style>

In the example I gave above the ID number was 4 so The snippet will be:

divi remove header from specific page
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

3 – Remove Divi Header on All posts

Concerning the posts, the steps are quite similar with some small differences in the snippet. so to remove Divi header from all posts you can use this custom CSS code:

<style>
.single-post #main-header 
{
    display:none;
}
</style>

If you would like to remove to target a specific post. then go to “Posts” and click “Edit” and see the link that appears in your browser address bar. just like pages, every post has a unique ID which is the one that is displayed after post= in the link.

In the example you see below the ID number of the post is 129.

wordpress post link
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

To target that particular single post you can use custom CSS and as we did to the pages you'll replace the variable “X” with your ID number in the following snippet.

<style>
.postid-X #main-header 
{
  display: none;
}
</style>

In my case, the ID number was 129 so I have edited the CSS code and pasted it in the custom CSS box as you can see below.

remove header from specific post
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

4 – Remove Divi Header on Product pages

Okay! let's assume you're running a store and you would like to have the header hidden in all the product pages. well, The good news is that we also can do that with the small piece of CSS code you see below.

<style>
.single-product #main-header
{
   display: none;
}
</style>

In the same manner, we'll use the product ID number to remove the Divi header from a specific product page. to find the ID you just have to go to Products > All products, hover over the product and you'll see the ID underneath it.

wordpress woocommerce product ID
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Now that you have the ID you'll target that particular page using the following CSS code snippet. and change the variable “X” with your product page ID.

<style>
.postid-X #main-header 
{
  display: none;
}
</style>

Let return back to the example I gave above. the ID was 102 so the snippet we'll use will be.

woocommerce specific product page
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Pretty easy, right?

let's continue …

5 – Remove divi header from category pages

Here's the CSS code you can use if you would like to hide the navigation header on all your category pages.

<style>
.category #main-header 
{
   display: none;
}
</style>

Now, if we want to remove the header from a specific category page, we'll need the ID number again. the process is very easy. from the WordPress dashboard go to Posts > categories. Click “Edit” and a long link will appear in the address bar.

The general rule of targeting a specific category is the following with the letter “X” being the ID number of your category page.

<style>
.category-X #main-header 
{
    display:none;
}
</style>

What we need is the number located after ID=. In the example below the ID number is 19.

wordpress category page ID
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

so, the CSS code snippet after implementing the modifications will look like this.

specific category page
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

6 – Remove Divi header from 404 page

The last option we're going to mention in this guide, is hiding the header from the 404 error pages is useful.

To do that simply copy and paste the following CSS snippet in Divi custom CSS box.

<style>
.error404 #main-header 
{
    display:none;
}
</style>

FAQs

The following are some of the most common questions associated to this tutorial.

1 – How to Remove sticky Header in Divi theme?

Regardless of removing the website header, one of the tricks you might want to do is to only hide the header when the user starts scrolling. by default, the Divi theme comes with a sticky header but we can easily change that directly from the settings built in the theme.

Here are the steps to remove sticky header in Divi Theme:

1 – Login to WordPress then Go to Divi > Theme options

remove sticky header in divi theme
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – Under General settings, turn one the “Fixed navigation Bar” then go ahead and save the changes.

remove sticky header in divi theme
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – How to remove line under header?

You might also want to remove a small thin line that appears under the navigation header, it's actually the border set to the header by default and there's no option in the theme settings to control that at least by the time of writing this article. but don't worry we have a solution!

To remove the line under the navigation header in Divi theme follow the steps:

1 – From the WordPress dashboard go to Divi > Theme options > integration

2 – Copy and paste the custom CSS code snippet below in the <head> section of your blog then click save.

<style>
/** Remove the border under header in Divi **/
 #main-header
{
     box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
</style>

3 – How to hide Divi theme header until scroll?

The third question that gets asked is related is to hide the header by default and make it appear when the user starts to scroll down.

Here are the steps to hide Divi theme header until scroll:

1 – From the WordPress dashboard go to Divi > Theme customizer

hide divi header until scroll
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – From the settings, choose “Header & Navigation”

hide divi header until scroll
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

3 – Next, click “Header Format”

hide divi header until scroll
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

4 – From the header format, put a checkmark in square next to “Hide Navigation Until Scroll”

hide divi header until scroll
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

5 – That's pretty much it! Now click the “Publish” button to save the settings.

hide divi header until scroll
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Further Reading:

Roundup

Although, most people ignore what they have in mind and just stick to the default settings or at least the settings that are already available to them which is fine. knowing the tips and tricks we have mentioned in our today's guide you'll be able to remove the navigation header anywhere you want and save hours and hours of headache.

I hope you liked this article and it solved the problem, if you need more clarifications or have questions drop them in a comment below. Besides, do let me know for what reason you're trying to remove the header from your website?

Otherwise, Stay Well.

Cheers!

0 Comments
Submit a Comment

Your email address will not be published. Required fields are marked *

Start a blog at 2.75$/mo

Categories

Pin It on Pinterest

Share This