how to make header 100% width ?

terrym · December 28, 2015

I'm trying to make a header with logo and menu. I've got all the parts in there, but the header background color (blue) is limited to the 960px width, ie as the screen widens you see the theme background color (white) on the sides of the header. The header is set for Entire Site.

When the screen gets wider than 960px, I want the header background color to continue to the sides, but the logo and menu to stay inside the 960px wide area. Also the footer background color and the central content area background color should continue to the sides.

This would be dead simple in an html/css page I built myself.
Is there a built in feature to create this look? If not, what is the recommended approach for editing the css?

photoclick · December 28, 2015

Yes - there is a built in feature to do just that. Examine the html structure of the page, then go to the designer and drop CSS content block on the page. Write the css that you would've written was it your own html page:)

AceCo55 · December 28, 2015

terrym wrote: »

I'm trying to make a header with logo and menu. I've got all the parts in there, but the header background color (blue) is limited to the 960px width, ie as the screen widens you see the theme background color (white) on the sides of the header. The header is set for Entire Site.

When the screen gets wider than 960px, I want the header background color to continue to the sides, but the logo and menu to stay inside the 960px wide area. Also the footer background color and the central content area background color should continue to the sides.

This would be dead simple in an html/css page I built myself.
Is there a built in feature to create this look? If not, what is the recommended approach for editing the css?

I have similar setup but instead of fixing the header to a specific size, I set it to a % of the screen width. This solves the problem when viewing your site on different screen sizes.
At the moment I have my logo width set to 50% od screen width and menu set to 50% of screen width.
Of course you could change the combination to suit your situation.

If you do want to do this, here are the steps:
1. Log in

2. Customize > Content and Design > Entire site

3. Then highlight the menu block and click on the Dimensions icon

4. Then change the "container width" to whatever you desire

5. Repeat for the "Logo" content block.
Just make sure the two container block widths add up to 100%

You could also use this website to simulate what your website would look like on different devices and screen sizes. Just type in your web address and select the device option (thanks to Denise for this info)
http://quirktools.com/screenfly/

how to make header 100% width ?

Comments