Last updated on

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.

 

SIGNUP FOR

BOLDGRID CENTRAL  

   200+ Design Templates + 1 Kick-ass SuperTheme
   6 WordPress Plugins + 2 Essential Services

Everything you need to build and manage WordPress websites in one Central place.

33 thoughts on “How to Remove the Space Between the Header and Page Content

    • Hi Leigh!

      The CSS written here was created specifically for BoldGrid themes and probably won’t work with the BeShop theme installed on your website. If you need help adjusting the margins and padding in that theme then I recommend reaching out directly to the theme developers in their Support Forum on WordPress.org. Hopefully they can help you get the spacing issue sorted out!

  1. Hello!
    It appears that I am also having trouble with the blank space under my header on my website. I see that it may require a specific line of code, would you mind taking a look at it?
    https://www.credcomment.com
    I use Wix instead, so I am not sure if there is a solution to my problem that you are able to solve, but I’m getting desperate as the team on the other website is not helping. I’d appreciate it if you could take a look.
    Thank you!

    • Hi Caleb!

      Unfortunately our team is not familiar enough with Wix to provide a definitive solution to the header spacing issue on your website, but we will try our best to help! The gap between the header and first banner on the website you linked is being created by the margin settings on that banner, specifically the top margin setting. I’m not sure if this is possible, but you might want to see if there is a way to adjust the margin settings on that banner to see if there is a way to reduce it.

      Good luck on getting that fixed and please let us know if you have any other questions for us!

  2. Hi
    I tried to use this CSS code (and many others), but it seems like I have a difficult theme to edit (Eris).
    The website I’m working on is the following one: gemini-glow.com

    As you can see, I deleted the title on the homepage (it’s a blank field, since you can’t delete the title block). Unfortunately, I’d like to delete that blank space too, and only on the homepage.

    I hope someone can help me.

    Many thanks
    Ralph

    • Hi Ralph-
      The CSS here was written specifically for BoldGrid themes, so it won’t work on the Eris theme that you’re using. The only way that I could find to reduce that whitespace was adding a negative margin to the div#content element, but that’s not an ideal solution because it behaves differently on mobile. Here’s the best solution I found, using a media query to change the negative margin depending on the screen size:

      div#content {margin-top: -50px; }
      @media only screen and (min-width: 768px) {
          div#content { margin-top: -80px; }
      }
      
    • Hi Naomi-

      These instructions were written specifically for BoldGrid Themes, so they won’t work correctly for your theme, Hammer.
      That being said, it looks like there is a variable margin in between your site title and the menu bar, depending on the size of the screen. Try this CSS:

      @media (min-width: 768px) {
        .has-header-text .site-navigation-panel {
           margin-top: 0px;
        }
      }
      @media (min-width: 1024px) {
        .has-header-text .site-navigation-panel {
           margin-top: 0px;
        }
      }
      
      • Hi Jesse,

        Thanks for your help on this. I tried your CSS code following the

        WP Admin > Appearance > Customize > Additional CSS > **paste code.

        Unfortunately, the code you provided didn’t quite work. It seemed to adjust it ever so slightly.

        • Hi Naomi-

          Thanks for the feedback! I checked your site again, and it looks different than the last time I checked. There’s a space in between your title and your navigation menu that’s being added for a Google AdSense ad, but it seems like it doesn’t load and so it appears as just a large white space there. The other funny thing is that the ad space doesn’t load for me the first time I browse your site, it only shows up if I refresh it (You can see this by checking it in a new incognito or private browsing window).

          The ad space is marked with the class “google-auto-placed” so I’m speculating that something is inserting that, possibly an Ads plugin that you’re using. I was able to hide it by adding this additional CSS:

          div.google-auto-placed {
              display: none;
          }
          

          That said, I can’t be sure that will solve the problem if the ad is being placed automatically by something.

          • YESSS!!! Thank you so much! I can’t tell you how helpful you were. It seems to be fixed.

            So so so grateful. Let me know if I can share any accounts or leave a review somewhere. Definitely worth it! 🙂

            Thanks again!

    • Hello,

      I’d be happy to help you remove the extra space on your website, can you please provide your domain or the theme you are using so I can assist further?

      Thanks,
      Nicole

  3. I am having this issue and none of these fixes seem to be working for my site: [redacted] .com

    It doesn’t show it when I am logged in, but shows the orange spacing when I look at the site from an incognito window and mobile. How can I remove this empty orange spacing after the menu and on top of the page title area.

    • Hi Bailey-

      These instructions were written with BoldGrid’s themes in mind, they won’t work for 3rd-Party Themes. That said, I checked out your website, and it looks like your header element has a min-height setting that’s causing that extra orange space. Here’s the rule you’ll need to adjust:

      body.header-stack:not(.template-slider) #Header {
          min-height: 315px;
      }

      I found that setting that to min-height: unset; completely eliminated the orange space below your header.

  4. Where are we supposed to add this bit of code?

    Custom CSS in the advanced part of the main customization area, or in the theme’s code itself?

    I’m trying to remove the strip of transparent colour that is on every page before the blocks i’ve added for content. This is the strip where the page title would show up if I marked it to do so, but normally i want my page title in the blocks i choose for my content.

    When i’m building a page or a post, it is a green strip at the top that blocks cannot go over. If i choose a block without a solid background, then it’s like a transparent green that allows my background image to shine through a bit, but i’m mostly choosing blocks with solid colour, so the small strip at the top just looks bad.

    • Hi Emily-
      Generally speaking, you’ll always want to add custom CSS to your Customize > Advanced > Custom JS & CSS menu, unless we specifically instruct otherwise. Changes to the theme files themselves are troublesome because they can be overwritten when the theme updates.
      You mentioned in another comment that you’re using Florentine. For that theme, you’ll want to use CSS code similar to this to eliminate that bit where the page title would normally show up:

      .site-content { padding-top: 0px; }
      
      • hi Jesse,

        thanks, i think it has worked a bit (the line is reduced by about half). Is it possible that there is a built-in bottom padding on the site title/menu/header area? If so, what is the code for deleting that space?

        Emily

        • Hi Emily-

          Yes, if you’d like to completely eliminate the whitespace, you can add this in addition:

          .entry-content { margin-top: 0px; }
          
          • awesome! that has worked, thank you!

            There is still one page where the block i’ve used has a box that is poking out above the rest of the block, and the background of this “poked out” part is still the weird transparent thing. Is there a way to get rid of it in that situation, or should i just choose a different block with a straight across top?

            thanks for your help in making my site look cleaner 🙂

          • Hi Emily-

            It may be a matter of choosing a different block. To say for sure I’d need to take a glance at your site. If you’re willing to post a link to the page you’re having trouble with, I’d be happy to take a look. If you don’t want your site published here, you can also start a new support forum post so we can see the link but the public won’t be able to.

          • Hi Emily, thank you for sending us that link!

            There is a top margin of 50px on the first block of that page that is pushing it away from the header area and creating a gap that shows up as the transparent green area. The box that floats upwards also has margins to adjust its positioning, only in this case it has a -50px margin that pulls it towards the header area. You can change the margins of both elements by opening up the Advanced controls in the Visual editor for each item and navigate to the Margins section where you will find some sliders that allow you to make any necessary adjustments.

            Please let us know if you have any other questions for us!

  5. I think I have done something wrong. I added this
    .site-content {
    margin-top: 0;
    padding-top: 0;
    }
    to my CSS so that I could remove the space on my Boldgrid theme and nothing happened. Please let me know if there is something I have done wrong. My site is couragetogo.com

    • Hi Anita-

      Taking a look at your site, I’m guessing that you’re trying to reduce the gap between your logo and your tagline, “Emrace. Encourage. Empower.” (By the way, that might be a typo if you meant to say “Embrace.”) If that’s the case, you’ll need a slightly different rule:

      div.site-title { margin-bottom: 0px; }
      
      • PLEASE I AM USING ASTRA THEME IN THE WEBSITE, THEYOUNIT.COM.NG AND I HAVE A UGE SPACE UNDER THE SIDER BEFORE THE SHOP PAGE, PLEASE ASSIST ME

          • hello Owen, i copied the CSS and pasted it but it doesnt still work, please assist me
            Here is the site theyounit.com.ng

          • Hi Chinedu!

            The gap below your slider appears to have been reduced by the CSS you added previously, or at least that appears to be the case when I viewed your website.

            meta slider and shop page gap

            If that screenshot looks correct, but you aren’t seeing the updated layout on your end, then it is possible that your browser is caching older website information. Clearing your browser’s cache or viewing your site in a Private/Incognito browsing window should ensure that you see the latest version.

            Please let us know if you have any other questions for us!

Leave a Reply

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