decreasing header height for twenty eleven

cityhippyfarmgirl · Member · May 31, 2014 at 7:06 am
Copy link

Add topic to favorites
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: (visible only to logged in users)
supportmyoffice · Member · May 31, 2014 at 2:09 pm
Copy link
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.
cityhippyfarmgirl · Member · May 31, 2014 at 8:16 pm
Copy link
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.
supportmyoffice · Member · May 31, 2014 at 8:51 pm
Copy link
T looks centered to me? Did you undo your changes?
cityhippyfarmgirl · Member · May 31, 2014 at 9:07 pm
Copy link
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.
supportmyoffice · Member · Jun 1, 2014 at 12:21 am
Copy link
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.
cityhippyfarmgirl · Member · Jun 1, 2014 at 3:36 am
Copy link
Thank you. I really appreciate you looking into it.
druesome · Staff · Jun 2, 2014 at 10:19 am
Copy link
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!
cityhippyfarmgirl · Member · Jun 2, 2014 at 10:34 am
Copy link
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.
cityhippyfarmgirl · Member · Jun 2, 2014 at 10:49 am
Copy link
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.
cityhippyfarmgirl · Member · Jun 2, 2014 at 11:01 am
Copy link
Done…I think!
druesome · Staff · Jun 2, 2014 at 3:06 pm
Copy link
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. :)
designsimply · Member · Jun 23, 2014 at 8:01 pm
Copy link
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.

No items found.