Need help? Check out our Support site, then


decreasing header height for twenty eleven

  1. cityhippyfarmgirl
    Member

    Could someone please help me with the CSS code for decreasing my header height? The width is fine, but I would like to decrease the height a little.

    The blog I need help with is cityhippyfarmgirl.com.

  2. Here is the CSS that changes the header size for Twenty Eleven Theme:

    #branding img {
    height: 100px;
    margin-bottom: -7px;
    width: 100%;

    Let me know if this resolves your issue.

  3. cityhippyfarmgirl
    Member

    It does and thank you for that. Could you also tell me how to keep the header central though? It keeps reverting to the left once I've shrunk it.

  4. T looks centered to me? Did you undo your changes?

  5. cityhippyfarmgirl
    Member

    I did undo the changes and reverted back to my original size until I can sort it out.
    The header shrinks fine, but the smaller it is, the further left it sits.

  6. Very strange! I'm going to have a mod look at this because it seems to be behaving differently for you. When I test it on my site, it does what it is supposed to. When I test it on your site with Firebug, it is acting really weird, shrinking and growing, but I cannot make it shift left.

  7. cityhippyfarmgirl
    Member

    Thank you. I really appreciate you looking into it.

  8. Hey there!

    I went ahead and added the following CSS code in your Custom CSS panel:

    #branding {
    background: url("http://cityhippyfarmgirl.files.wordpress.com/2014/02/header-51.jpg") no-repeat bottom right;
    background-size: 1000px 288px;
    background-position:0px -57px;
    }
    
    #branding img {
    	height: 230px;
    }

    What I did first was replace your header image with a transparent PNG image.

    https://cityhippyfarmgirl.wordpress.com/wp-admin/themes.php?page=custom-header

    In the CSS above, I set your previous header image as the background image.

    This allowed me to shrink the header height to 230px without resizing the header image at the same time. All of this may look a little complicated, but please do let me know if you need further explanations. :)

    If you'd like to learn more about the CSS background property, please check out this resource:

    http://www.w3schools.com/cssref/css3_pr_background.asp

    At the same time, feel free to experiment with the code I provided. Cheers!

  9. cityhippyfarmgirl
    Member

    Hi thanks for looking into that.
    From my view on ipad mini, the header is cut off by about a quarter and on a mobile the header is cut by 3/4's? Making it look unreadable on both these devices.

  10. cityhippyfarmgirl
    Member

    Could you please help me just reinstall the original sized header at 288 until I understand what's going on a little better, I can't seem to revert it from my end?
    And thank you for the links.

  11. cityhippyfarmgirl
    Member

    Done...I think!

  12. Hi there,

    Sorry to hear that it didn't display correctly in your iPad and mobile phone. If there's anything else I can do to help, let me know. :)

  13. Twenty Eleven comes with a built in flexible header image space. That means you should be able to upload a smaller height header image and the theme should just adjust automatically, and it should still look good on iPads and mobile phones.

    To try it out, first create a header image that is 1000 pixels wide and 200 pixels tall (or whatever height less than 288 pixels you think would work best).

    Then go to Appearance > Header and upload the new header image. When you are prompted to crop the image, click the Skip Cropping button.

You must log in to post.

About this Topic