Using a new theme and wondered how I go about reducing the black space above the header as currently it is too deep.

The site in question is here http://www.marqueehireauckland.net.nz/

The theme is twenty eleven



no coding needed - in the dashboard under Appearance -> Header - Display Text: No this also cleanly moves the searchbox into the menu line.

edit: a css possibility would be to reduce the top padding in the style of #site-title.


That black space is where the name of the website is normally displayed. If you're not going to show the title there, you can remove that space by adding the following CSS to the bottom of style.css:

#site-title { display: none; }
#branding #searchform { top: 0; }

Want to tighten it up even more? Try this:

#site-title, #site-description { display: none; }
#branding #searchform { top: 294px; }

Go into your theme folder (/wp-content/themes/twentyeleven) and on header.php remove everything between the following:

<hgroup> ... </hgroup>
  • That does the same thing as my answer, but you'll end up with the search form on top of the image, which you may not want. You'll still have to edit the style.css to move the search form where you want.
    – Doug
    Aug 5 '11 at 19:36
  • I agree that more CSS tuning may need to be done, but in general you should not leave elements on the page that are simply hidden by CSS.
    – GavinR
    Aug 5 '11 at 19:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.