Teacher and coach

Removing the whitespace at the top of your Thesis blog

If you use the Thesis theme for your WordPress blog, you might have created your own custom header image for your site (kind of like mine, above).  If so, you may have noticed that there’s a little bit of whitespace between the top of your browser window and the top of your header image (kind of like mine, above).  If you want to get rid of that whitespace, you’ll need to add a few lines of code to your Thesis custom.css file.  It’s a simple fix, and here’s how you do it.

Click on the Thesis Custom Styling option under the Appearance menu in your dashboard sidebar.  This allows you to make changes to your Thesis custom.css file.  At the bottom of this file, insert the following lines of code.

/* The following lines control the whitespace at the very top of the page (i.e., above the header image). If you set the padding-top property value to 0 (zero), your header image will be flush with the top of the page.
*/
.custom #page {
padding-top: 0;
}

You can also set the padding-top property value to something else if you actually want some amount of space between the top of the browser window and the top of your header image.

Save your changes, reload your blog page, and the whitespace will be gone.

22 Responses to “Removing the whitespace at the top of your Thesis blog”

  1. bledsoe says:

    I’m not sure how to do that one Keira. Anyone else?

  2. Keira says:

    How do I remove the padding from between the nav menu and the page content once I have put the nav menu after the header?

  3. bledsoe says:

    Excellent. If you don’t need the extra code, by all means leave it out.

  4. Chuck says:

    Thank you Lance,

    Worked for me too. I only did the following and it worked for me.

    .custom #page {
    padding-top: 0;
    }

    Didn’t need to do bottom, right, left etc. Thesis said the optimal size of my header should be 954 pixels. When I did that, I didn’t get any white space on the side

  5. Thanks Lance, this is much appreciated!

  6. bledsoe says:

    Hi Wade,

    Here’s what I did:

    From the left sidebar in your WP dashboard, select “Thesis” and “Custom File Editor”. From the dropdown menu, select “custom.css” and at the bottom of the file add the following:

    /* The following lines control the alignment of your header image with your navbar. As long as these are all set to zero, your header image will be aligned with your navbar on the right and left, with no whitespace between the header image and the navbar.
    */
    .custom #header {
    padding-bottom: 0;
    padding-top: 0;
    padding-left: 0;
    border-bottom: 0;
    }

    The entry you’re interested in is “padding-bottom”, which controls the space between the header image and the nav menu. Make sure it’s set to zero and you should be all set.

  7. Hello,

    Thanks for this. I’m just wondering how you managed to remove the white space between your header image and nav menu? I’ve been trying to get rid of my for hours, but all conventional methods don’t seem to be working. Thanks.

  8. bledsoe says:

    (Sorry, I don’t know how to do that with images.)

  9. Cara Jeanne says:

    I am trying to add space on top of the header in order to place an image behind it the crosses the whole screen but would be partly hidden behind the header. I tried the code but changed 0 to 120 and I tried Genevieve’s technique by changing padding to margin. Any help?

  10. Genevieve says:

    It did not work so I replaced padding with magin and it worked (I had no space and wanted 40px)

  11. bledsoe says:

    Hi Dave,

    Glad it was useful. This short blog post is almost two years old and still seems to rank high in Google search results. Speaks to the quality of WordPress when it comes to SEO.

  12. Dave says:

    Good old Google brought me here. The system works!

    Thanks for this. My other option would have been to try the forum and bizarrely it’s not that easy to find stuff on there.

    Cheers
    Dave

  13. Gouri says:

    Thanks for this simple but useful tip.

  14. Jordan Ewert says:

    Thank you, exactly to the point and what I needed!

  15. Adrienne says:

    Worked great, thanks so much!!!

  16. Will Quick says:

    This post was exactly how I like my women: straight-forward and simple! Thank you massively, this really helped!

    Will

  17. John says:

    Worked great. Thanks for the tip.

  18. Vincent Cameron says:

    worked like a charm and it was hard finding this solution I thank you.
    Vincent

  19. Raleigh says:

    Worked great. Thank you.

  20. breslinv says:

    Paisano,

    I had the same problem, I modified the layout.css file

    Change from padding 2em or something to;
    #header_area .page { padding-top: 0; }

  21. bledsoe says:

    Well, hell, it worked for me. Do you maybe have some other code customizations that are overriding this one? Like somewhere else where padding-top is set to a number other than zero? I’m not a css expert, but this is all I can think of.

  22. paisano says:

    Hello. I tried this code but I can’t remove the extra white space at the top. So frustrating. Been looking everywhere on how to do this.

Leave a Reply

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

Powered by WordPress | Designed by Elegant Themes