Skip to content 
If you use WordPress, sometimes figuring out how to remove a tiny little white space can drive you crazy. Do you just ignore it and decide close enough? If you are just learning how to use WordPress, the littlest things can be a challenge, but removing header space in WordPress is pretty easy.
As a general rule, you can edit the header in WordPress using your theme’s editor or using CSS. How you edit the extra header space will depend on which theme or editor you are using, but each method generally involves editing the padding around your header.
Since every theme and editor is a little different, what you need to do to remove the header space will be slightly different depending on which theme and editor you use, but all involve editing the padding. This post will explain how to adjust the padding with CSS and with some of the popular editors and themes.
How to Remove Header Space with CSS
Some themes have a built-in CSS editor. If you are using themes like Divi, Astra, or Avada, they have a built-in CSS editor. This is great because you don’t need to know CSS to use them. You can edit the elements of your website, including the CSS using the built-in editor.
If you are not using a theme with a built-in CSS editor, the easiest way to update the CSS is to use the WordPress Customizer. Unless you are comfortable with CSS, you should always use the Customizer to add custom CSS to your website and not edit your theme’s style sheet.
Here’s why. Every WordPress site has one main style sheet that controls the design, spacing, and layout of your website. You can find this style sheet by going to WordPress> Dashboard> Appearance> Theme Editor. Under the Theme Editor, you will find a file named style.css. This is your main style sheet.
Editing this style sheet updates the file that controls all the design elements of your website.
However, editing it can also break your theme. This is why the theme editor gives you a warning when you try to edit it. If you make a mistake, it could cause issues with the functionality of your website. Also, if you update your theme, all of your changes will be lost.
Even if you’ve read a tutorial recommending that you edit your style sheet, you don’t need to. There’s an easier and better way to do this. I am going to explain how to add CSS to your website using the WordPress Customizer.
How to Add Custom CSS to WordPress
Go to your WP Dashboard> Appearance> Customize
This will take you to your Customizer. You will see the option to add Additional CSS here. This is where you can add custom CSS to your site.
Since you are trying to change the padding around your site header, you would edit the CSS class site-header as this is the class that controls the spacing around the header. To change the padding around your header copy and paste the following code inside the Additional CSS section of the Customizer.
.site-header {
padding:0px 0px 0px 0px;
}
Be sure to read our guide on the difference between margins and padding. It explains what padding does and how to add padding in CSS. In the above example, the numbers following the padding property tell you how much space you are adding around the header. They are written in clockwise order, starting at the top. There is 0 padding on the top, right, left, and bottom of the header.
When you add the CSS code to the Customizer, you will see the changes in the preview. Go ahead and change the numbers in the CSS to see how it works. By setting the padding to 0 px, you remove all of the padding from your header, but you can change this to any pixel size you want.
You can also remove the header altogether by using this CSS code.
.site-header {
display: none;
}
That’s how you remove the header space using CSS. If you don’t want to use CSS, you can edit it directly with your theme’s Customizer. I am going to explain how to do this with a few of the popular themes.
How to Remove Header Space Using Your Theme’s Editor
If you don’t want to use CSS or if you prefer using your theme’s editor, you can remove space from your header using your theme’s built-in editor. Below are a few examples of how to do this using some of the most popular themes.
How to Remove Header Space with Divi Theme
Divi is one of the easiest WordPress themes to use. Removing space from your header is easy. Just go to the top section of your header. Then click on the gear shift to edit the section. Click on the Design Tab.
Then open Spacing. You can adjust the padding around the section by changing the pixel size of the top or bottom padding
How to Remove Header Space with Astra Theme
Astra uses a header builder which can be a little confusing. The Astra header builder contains three sections, the primary header, above the header, and below the header. Generally, the primary header is where your navigation menu goes. You can add your logo to the primary header or the above the header section. Technically, you can place your navigation menu and logo in any of the three sections, but most people use the primary header for their navigation.
You can adjust the height of each section by going to the general tab. Change the pixel size to the height you’d like the section to be.
To change the padding, go to the Design tab. You can adjust the padding around each section of the header by adding a pixel size to the top or bottom padding. In this example I used 20px, but if you want no padding, change it to 0.
How to Remove Header Space in Hello Elementor Theme
When editing the header in the Hello theme, there is not an option for padding. The default theme includes some padding above the header. You can adjust the padding in the header using CSS. Follow the instructions above on how to add custom CSS to your WordPress site. Or, if you have Elementor Pro, you can use the theme builder to create a new header. To find the theme builder, go to WP Dashboard> Templates > Theme Builder.
In the theme builder dashboard, you will see an option for building a header. Note: This option is only available for Elementor Pro.
How to Remove Header Space in WPOcean Theme
To remove the header space in WPOcean, go to WP Dashboard> Appearance> Customize> Header
Then go to the General section to adjust the padding. Change the top or bottom padding to 0 px to remove the space above or below the header.
How to Remove Header Space in Avada Theme
Avada has its own built-in dashboard for customizing the theme. To adjust the padding in the header, you need to go to the Avada Theme Options.
Then go to Header> Header Styling
Under the header styling, you will see the option for Header Padding. The arrows next to each option indicate the top, right, bottom, and left padding. Change the pixel size on the top or bottom padding to remove space.
These are the methods for removing header space with examples of several of WordPress’s most commonly used themes. Your theme’s options may be slightly different. If you can’t remove the space using your theme’s built-in editor, try using custom CSS to remove the space.
