twenty twelve transparent header

OK, so let me make sure I understand what you want to do. You want the awning to extend all the way across, instead of being confined to just the width of the navigation bar and the rest of the page content. It can be done, you can create a transparent PNG and remove the red part that’s at the bottom of the awning. Then you’d set the position of the image to absolute, set the width to 100%, and the top & left to zero. You’d also set the height to about 250px, and give the nav bar a margin-top with the same value. Then, as a final touch, add some media queries to adjust the height of the image and the margin-top of the nav bar on smaller viewports.

It is a bit late here and my brain tired, so I will try tomorrow. You understand what I am doing. The navbar could even stay the width of the page.

I can easily create a transparent PNG for the header although not sure what width to do so.

I basically understand the direction you are going but not the places for setting image to absolute, width and that sort of thing or if it is in the header,php or css.

Would the header be called from a image folder within the child theme or would it pull from the uploaded header?

I am not sure of the route for doing this.

You can use the exact same setup you have now, everything can be done via CSS. You can even test it out with the current image before you replace it with the transparent PNG. The main problem with using the current image is that it is only 980px wide, so on a wide browser, the resolution is going to start looking a little grainy as the image gets stretched out. But it is adequate for demonstrating the concept.

Add these CSS rules to the end of your child theme’s style.css file:

img.header-image {
   position: absolute;
   width: 100%;
   top: 0;
   left: 0;
   height: 250px;
}
nav.main-navigation {
	margin-top: 250px;
}

@media screen and (max-width: 720px) {
   img.header-image {
	   height: 150px;
   }

   nav.main-navigation {
	   margin-top: 150px;
   }
}

The first rule sets the position of the image to absolute, which frees it from the confines of the header element so the width will expand fully across the browser window. Top and left properties are set to zero so that the image starts in the upper left corner of the page.

The second rule pushes the nav bar, and everything that follows it, down by the same amount as the height of the image by using the margin-top property, which I set to 250px. If this wasn’t there, then the rest of the page would have slid underneath the header image because by setting the header image’s position to absolute, it takes it out of the normal flow of the page.

The last part is a media query that just sets the height of the image to a smaller size, and readjusts the position of the content, when the viewport shrinks to less than 720px, which is about the size of a tablet.

You sir, are a very bright star upon my day. I still need to update my graphic better. But this is awesome! Especially with your explanation on how it works.

The time I have spent on this I hate to think about, but is worth it with your input. Plus, I am sure many more will find this helpful as well.

Thanks again!

CrouchingBruin – Could provide me some assistance as well…

My site is here

I need a similar fix as wldwil. As you can see, my Header has a white outline around it and I can’t figure out how to remove it. I’d rather stretch the Header out to encompass the white space versus eliminating the padding and margin.

As an FYI, I’ve set up a child theme and I’m editing within the style.css

thanks!