decreasing header height for twenty eleven

  • Author
    Posts
  • #1866476

    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.

    #1866590

    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.

    #1866593

    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.

    #1866594

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

    #1866595

    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.

    #1866602

    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.

    #1866606

    Thank you. I really appreciate you looking into it.

    #1866621

    druesome
    Staff

    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!

    #1866622

    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.

    #1866623

    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.

    #1866625

    Done…I think!

    #1866628

    druesome
    Staff

    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. :)

    #1866701

    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.

The topic ‘decreasing header height for twenty eleven’ is closed to new replies.