Twenty Twelve: Make Navigation menu appear in Header

Do not forget that the theme is responsive. The height of <img /> and the height of <div> don’t scale at same rate.

For <img /> it scales proportionally to its width and height limited by the width of its container, for <div> it doesn’t get resize height-wise.

I see, thanks.
In that case I’d rather stick with the menu as it is.

This is my site:
https://casasyhotelesdemexico.com/

I still would like to get the menu and the image header up as much as possible. As far as I can see the white space between the top and the menu is caused by the site-title and site-description.
I made those dissappear by adding:

.site-header h1 {display:none;}
.site-header h2 {display:none;}

But the white space is still there.
It might be better to move them down to below the header image. If I do this I might get rid of the white space straight away, correct??

Any thought on how to move these H1 and H2 down to below the header image?

Remove this

.site-header h1 {display:none;}
.site-header h2 {display:none;}

Put this

img.header-image { margin-top: 0; }