-
Posts
-
My client would like to have a fixed-width layout on his site however would like to have the header bar (with a custom gradient background image) expand to 100% of the screen. He wants the layout to be preserved between desktop and mobile devices.
Is there a way to get the header div to expand to 100% without breaking the layout below it? I have tried that, then I have to manually set the width of the div’s below it and set margin: 0 auto;. This seems to break some of the layerslider functionality (navigation arrows disappear).
Is there a clean way to achieve this? Can’t just do it with background as he also wants a sticky header.
Thanks,
Bill
I’ve been playing around with putting an absolute div at the top, same height as the header, z-index of -1, but just in Chrome developer tools. I put it as the last div before the body closes. Not sure which php template to put it in for it to work in all pages. Is this a good approach?
Hey wjstarrsiii!
In this case you’ll want to use the stretched layout with this CSS.
#main > .container_wrap:first-child { background: red !important; } /* or use whatever background you need */ #main > .container_wrap:first-child .container { background: white; }That will leave the header full width but make everything else look like it’s boxed.
Regards,
ElliottElliot, thanks for this. It gets me as far as the first content div below the header.
I would like the background (I’m using a pattern instead of a color) to go all the way down the entire body. Right now my frontpage has a slider and some content below it. Only the slider is getting the background at the margins.
It runs all the way down for blog posts (where I bet I only have a .container_wrap:first-child div, but where I have more than one div thanks to the layout editor or a footer, it stops after 1. How to get it everywhere?
Thanks again,
Bill
- The topic ‘Possible for full-screen header bar with boxed layout underneath?’ is closed to new replies.