creating a special type of HEADER…little help please

[drotar]

thank you for taking the time to read this. i am creating a responsive, full screen site for a client. I want to add rectangular transparent bars across the header and footer that will expand beyond the 1024px body. as you see along the top, the header has no color, only the navigation buttons, home about, reel, archive, contact. on either side of these buttons i want to have the rectangular boxes that extend out to the end of the site no matter how large you make the screen.

what i cannot figure out is how to do this. i put up the art work to show you exactly what i am trying to do. be aware that the art work will stretch across the entire page, not like this mock up which has white on both sides. I know how to make the page resize to 100%,, what i don’t know is how to put the white transparent boxes on either side of the header and not have the transparency extend under the navigation buttons themselves..

any suggestions would be greatly appreciated. this is a real stumper for me.[Your text to link here…](http://www.drotardesign.com/cssTricks/test.html “”)

[Paulie_D]

You just need a inner divs to hold the centered content.

Like this: http://codepen.io/Paulie-D/pen/JFohr

It gets a little more complicated with the bg image as, I think you would have to use it twice.

Let me think.

[drotar]

Paulie_D,
you are absolutely right. it was under my nose and I did not think of it. thank you for your great insight. it works perfectly. a bit tricky however because i had to deal with the responsive menu issues as well when dealing with it.

d

[Author]

Posts