wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog WordPress themes Twenty Eleven white space above header [How to remove it]

WordPress themes

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

Last updated on February 18, 2017
Posted on July 19, 2011

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.

  • Is my site loading fast? I use this shared hosting
  • Try my theme >

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.

Steps:

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.

remove to twenty twenty eleven wp 3.2

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← Twenty Eleven Header Image How to Change size
→ How to remove Twenty Eleven Search Form from Header

Comments

  1. Omo says

    August 5, 2011 at 2:57 am

    thanks so much 😀

  2. bhengstr says

    August 16, 2011 at 7:29 pm

    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:
    http://prntscr.com/2nxgz

    Any help will be appreciated. 🙂

  3. Aikidoka says

    November 7, 2011 at 3:31 pm

    THANK YOU SO MUCH!!!

  4. Kalen says

    February 7, 2012 at 10:01 am

    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.

    • Kimi says

      February 12, 2012 at 7:46 am

      Hi Kalen!

      I would try to clean your browser’s cache, and refresh your blog to see the changes.

      Kimi.

  5. Andrew says

    August 28, 2012 at 9:59 pm

    Thank you so much.. it worked perfectly… finally somebody got it right…

  6. hassan mirza says

    September 29, 2012 at 10:40 pm

    Great Post. Thnx

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • Twenty Nineteen theme tutorialTwenty Nineteen Theme Full Tutorial - Creating a Website
  • Twenty Seventeen One Page ParallaxTwenty Seventeen One Page Parallax Scrolling Website Style
  • Twenty Seventeen Proudly Powered By WordPress codeTwenty Seventeen Footer "Proudly Powered By WordPress" Text
  • Where your child theme folder should be located inside themesHow To Create WordPress Child Theme Manually or With Plugin
  • How to Remove Twenty Fourteen Author Name or Link
  • How I add thumbnails with Twenty Twelve theme
  • Change Default Green Color WP 2014 Theme
  • Showing Twenty Fourteen Thumbnail in A Smaller Size
  • How To Style WordPress Caption in WP Twenty Fourteen Child
  • Proudly Powered By WordPress Twenty Fourteen

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept