twenty twelve, how to get header image on top?

Have you a Child Theme?

review https://codex.www.ads-software.com/Child_Themes

as Twenty Twelve is the default theme of wp3.5, it will get updated regularly; to keep any customisations during an update, you will need to have a child theme.

because there is likely some formatting involved, please post a link to your site to illustrate what you have so far.

related:
https://www.ads-software.com/support/topic/how-to-move-menu-below-header-image-in-twenty-twelve-theme?replies=19

I made the child theme.
Thank you for the links. Using them I got the
header image on top.
I used firebug, but I can’t find the locations to remove the grey space on top. Same with removing space on top of the header image.
I prefer not to write my site url, but so far I haven’t made other changes to default wordpress than unchecking top text and installed my own header image. I haven’t made any changes to the child theme style css.

Without seeing the site, it’s really not very possible to help with CSS questions like this. Firebug should show you what code is creating that space.

remove the grey space on top

in style.css of the child theme, add:

body .site {
		margin-top: 48px;
		margin-top: 3.428571429rem;
	}

reduce the margin-top values to whatever you need; or set them to 0 zero.

the usage of ‘rem’ is explained at the start of style.css of Twenty Twelve

Thank you
What I paste into the child theme style.css and upload, it doesn’t work.
Is something wrong about the style.css. I took the info from
https://codex.www.ads-software.com/Child_Themes

style.css

/*
Theme Name: Twentytwelve Child

Template: twentytwelve
*/

@import url("../twentytwelve/style.css");

body .site {
		margin-top: 48px;
		margin-top: 3.428571429rem;
	}

Did you switch to (activate) the child theme?

EDIT — actually, the problem is that you did not make any changes to the CSS code — so it’s the same as it was. Try changing the margin-top.

Download a basic Twenty Twelve child theme

HTH

Thanks.
Yes the child theme was activated.
No, I hadn’t set the margin values.

I tried now. If I set another px value, nothing happens.
If I set the rem value to 1, px stay 48, the gray space almost is gone.
But I can’t find the location, where rem is explained. Know a link for info about rem?

See https://snook.ca/archives/html_and_css/font-size-with-rem

don’t forget to clear the browser cache so you can see the changes – press ‘CTRL F5’ or ‘reload’ or whatever your browser needs.

I prefer not to write my site url

your choice – however, with formatting problems, this makes it near impossible to help you;

you will depend on the good use of browser inspection tools such as Firebug…

Thank you.
I now use ctrl + f5.

I’ve made some steps.
My child theme style.css looks like this:

/*
Theme Name: Twentytwelve Child

Template: twentytwelve
*/

@import url("../twentytwelve/style.css");

body .site {
		margin-top: 48px;
		margin-top: 0rem;
	}

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

.site-header {
    padding: 0rem 0;
}

.main-navigation li a {
    border-bottom: 0 none;
    color: #6A6A6A;
    line-height: 2.3;
    text-transform: uppercase;
    white-space: nowrap;
}

body .site sets gray space on top.
.header-image and .site-header sets padding on top of header image.
.main-navigation line height sets the height of the menu bar.

Using the “move header image on top” link above, the menu bar is now beneath the header image.
I have used firebug to inspect the area about the menu bar,
but I can’t find code that sets the padding between the header image and the menu bar.
Can I look for the code somehow else?

alchymyth you win. I can’t find a way to make the padding
between the header image and menu smaller, and
I have used firebug.
I have uploaded the site here.
https://unocan.eu.pn/

Here’s the CSS producing the gap. It’s visible in Firebug or a similar browser inspector tool
https://snag.gy/vj39h.jpg

Thank you. It worked. I’m running firefox ubuntu firebug, are
you using explore?
I already inspected the area shown on your picture, but the code your picture shows, isn’t there.
I had to go to wordpress twentytwelve style.css editor to find the code on your picture. I put it into the child theme style.css and the top menu padding can be set.
If there is a reason, why my firebug doesn’t show the code, I would like to know why?