Support » Fixing WordPress » Problem with header height

  • Resolved larsky


    I am using WP in combination with WP e-commerce and the craftycart theme. I am trying to restyle the header, but instead of restyling the header image (which doesn’t seem to be present) i did a full page width background which is set in the stylesheet.
    All seems fine so far, but now i want to get rid of the WP title (although I still would like the title to be present as you probably understand).
    I looked up some different ways to ‘solve’ this and the most obvious seemed to be the display: block option in the stylesheet. But now my the whole of my body content nudges upwards and thereby conflicts with my background.

    Is there a way to avoid this from happening?

    Thanks in advance!

Viewing 7 replies - 1 through 7 (of 7 total)
  • i want to get rid of the WP title (although I still would like the title to be present as you probably understand)

    Actually, I don’t understand. It would probably help if you provided a link so people could see what you are referring to.

    You’re so right…. sorry. It is all about the visual present title in the header as you probably do understand when checking this link 😉

    In your header.php look for

    <div id="header">
    		<div class="container">

    Take out everything in from the <h1> to the </h4> tag (including the tags themselves). That will get rid of the text link for the blog name and will also take out the tag line.

    If that makes the height of other things change, assign a height to #header in the style.css.


    You could set #header to display: hidden; in style.css and if that causes the height of other things to shift, also add a height property to #header. Maybe something like:

    display: hidden;
    height: 50px;

    Use whatever height works for you.

    p.s. you may have to use #header container instead of just #header.

    Thank you for your quick reply SS-Minnow!
    Indeed that did the trick. First i took out the <h1> to <H4> in header.php. After doing that the upwards shifting of the page content was a fact. But after i put in:

    #header .container {
    display: hidden;
    height: 51px;

    everything was just the way i intended it!
    Thank you very, very much! 🙂

    Good job noticing that it needs to be #header .container not #header container. Sorry about that.

    Since you have removed everything that was set to display there, there’s really no reason to also mark it hidden, but that’s not hurting anything.

    For possible future reference; Here is the complete #header .container section in the style.css of my template.

    #header .container {
    	padding: 25px 0 40px;
    	background: url('images/logo.png') no-repeat 3px bottom;
            height: 51px;

    I finally was able to take out the complete display part and merge it with an allready existing #header .container part.
    Since i am pretty new on css i am not sure if it is ‘ok’ what i did, but the result suits me fine.

    Thanks again for your input SS_Minnow

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Problem with header height’ is closed to new replies.