How to Remove the Space Between the Header and Page Content

Some BoldGrid themes are designed to have some additional separation between the Header and your website content, usually meant to display your website background.  The spacing is controlled by your theme’s stylesheet and unfortunately is not controlled by any settings within your theme options.

However, you can make the necessary customizations you need by adding some CSS rules to your Customizer.  The spacing between those elements is controlled by two CSS properties, Margins and Padding.

The margins and padding are added to a wrapper element that surrounds all of your page content using the site-content class.  The following CSS targets that class and removes the margins and padding on the top of it to close the gap between you page content and your header.

.site-content {
    margin-top: 0;
    padding-top: 0;
}

You can easily modify the code as well if you want to increase/decrease the spacing by changing the zero values in the code to any valid CSS Unit.

Working with Custom CSS

Generally speaking, you’ll want to add custom CSS to the Customizer in the CSS/JS Editor panel. Depending on your theme, this section could be under Advanced or have a different title like Additional CSS. We don’t recommend making changes to core theme files. Your modifications can be overwritten when the theme updates.

If the code given in this article does not work for your website, there is another thing you can try. Using your browser’s developer tools you can try and locate the source of the gap. This isn’t as scary as it sounds! We have two videos below demonstrating how to find code to change and how to find margin and padding.

Start by right clicking on the part of your website you want to update. If you are using Firefox click Inspect Element, if you are Chrome it’s called Inspector. A popup will appear with your website’s code. The element you’ve selected in the code will appear highlighted on your screen. Use the element’s ID or class to localize your changes only where you want them.