Twenty Eleven white space above header [How to remove it]

Is Twenty Eleven white space above the header too big?

Twenty Eleven white space above the theme’s header is probably a very easy task but not everyone knows this simple step.

If you have updated your blog to the latest wordpress version, you will notice the new default theme, which is called Twenty Eleven theme.

I have posted some few tutorials about this theme, which are:

  1. Twenty Eleven logo video
    How to replace site title of Twenty Eleven’s theme with an image.
  2. TwentyEleven child theme
    How to create a child theme of TwentyEleven wordpress 3.2 default theme
  3. Change continue reading of TwentyEleven theme
    If you want to change the “continue reading” wording of TwentyEleven, then this tutorial might help.
  4. TwentyEleven header image size
    This tutorial I have made to make the original size a bit smaller by editing functions.php of the child theme

However, in my offline installed blog (I actually copied this blog to my computer, more tutorial on this, see how to copy online live blog to computer), I have noticed the Twenty Eleven white space on the header is also too big.

I know it depends on people’s preference, some might find it fine, some find it too big, and want to remove that Twenty Eleven white space above the header image.

Twenty Eleven white space above the header changes

The method to remove that area above the header is very easy, but there are some changes you should be aware of.

But it is not a big failure if at the end, you want to turn it back on to have a previous appearance white the area above your header image.

I have took a screenshot, after removing that white area;


twenty eleven white space
The changes after removing Twenty Eleven white space

From the screenshot, you will see I put number 1 and 2.

1. You will have a slightly small space above your header (between header and browser).

This eliminate that white area, and eliminate the whole site title and description.

You will probably wonder how is it affecting your blog’s search engine optimization?

The answer is, it will not affecting anything, since when you eliminate that white area, the source code still shows there is h1 site title and h2 just like when you have that white space, so it will not give any bad effects in your blog’s search engine optimization.

2. The search form is moved to the menu bar.

I actually really love this part. If you see the number 2 in my screenshot above, that is the search form bar, which is normally you will find on the right side of your header, when Twenty Eleven white space is still existing.

Now when you remove that white area, the search form will be moved to the menu bar on the very right side of your blog’s navigations or menus, without adding or changing some file codes, which I found really handy and great looking.

How to remove Twenty Eleven white space

As mentioned in the first paragraph of this post, removing the Twenty Eleven white space above the header image is absolutely easy.

But when you are really newbie, overwhelmed with so many buttons and options in wordpress dashboard, you might miss this feature.


1. You are logged into your dashboard or admin page to access “Appearance” tab and then “Header”.

2. You will find so much options for your header, leave them as it is, scroll down until you find “Display Text” yes or no tick boxes.

twenty eleven white space
No or Yes tick boxes

3. Tick on “NO” option to not displaying the site title text, and it will “remove the site title” as well as removing Twenty Eleven white space area.

4. Don’t forget to click “save changes” and refresh your blog to see the changes.

Note: If you want to bring back the text, just tick on “yes” on display text option.

Now you will see some changes I have mentioned in the 2nd paragraph above, after Twenty Eleven white space area is removed.

Share the knowledge
Share on Google+1Tweet about this on TwitterShare on Facebook0Pin on Pinterest0Share on Reddit0Email this to someonePrint this page


  1. bhengstr says

    hmm, for some reason I dont have a search bar.
    And my problme is how to vertically center my blog (web site) title and description, on top of header.

    here’s a screenshot:

    Any help will be appreciated. :)

  2. Kalen says

    Hi Kimi, I still have the white bar above the header image after i save the changes not displaying the text. Can you help me with this? Thanks.