As you discovered, you need to change the #branding div. However, just altering the height either of #branding itself or of the height attribute in the HTML will not be enough because the image is 288px high and this is determining the actual height displayed.
So, one obvious solution is to reduce the height of the image either by cropping or scaling in the GIMP or something, replacing the current image with the shorter one and changing the <img> height to suit. Of course you can only do this if your theme allows it.
If you can’t reduce the height of the image, the alternative is to reduce the height of the #branding div and set the overflow property to hidden like so:
#branding {
height: 200px; /* or whatever suits your design */
overflow: hidden;
}
This just means your image will have the bottom ‘chopped off’ (i.e. invisible). This may, or may not be acceptable to you.
Unless it’s your own theme or your theme specifically disallows it, I make here the usual exhortations to do all your changes in a child theme.
Remember to take backups before you make any changes.
HTH
PAE
First of all thanks for the help. It worked but the thing is, the menus are gone now. Is There a way that I could edit only the image header without cutting off the menus. I don’t know if twenty eleven theme allows it. If ever it don’t, how can I let me?
So now I know that the branding div includes the whole header along with the menu.
