1 reply [Last post]
newcssguy's picture
Last seen: 10 years 15 weeks ago
Timezone: GMT-4
Joined: 2012-10-17
Posts: 1
Points: 2

Hello all. I'm using the 2011 template in wordpress and I want to make the menu bar span th full page. After a little trial and error what I did was change the body padding, page margin and max width to none. This made the entire "inner page" span the whole page width wise if that makes sense. This will work if I'm stuck with it but I'd like to keep that default border and just have the header menu span the page. I asked this question over at the wordpress support forum and was sent here. Any ideas?

much appreciated

Hugo's picture
Last seen: 8 years 4 weeks ago
Joined: 2004-06-06
Posts: 15668
Points: 2806

There isn't a simple answer

There isn't a simple answer to this, You would likely have to re-factor the template files to accommodate this change. #page governs the width of the layout and holds all elements, the nav element is further contained by the header element.

You might have to do something along the lines of removing the #page wrapper, removing the nav element from header and placing it after header closes but wrapping header in a new parent #header-wrap and adding the #page elements rules to this new header container, then also adding a wrapper element to everything after the nav closes and adding the same original #page rules to that so that header and main content still had the max width confine but the nav would span the full viewport width. Easiest way of doing this would probably be to add a closing div after header and a starting div after nav that way you use the old end tag for #page and the start tag, you might also need to add an element in to nav to allow you to apply the same max width and auto centering (in reality the ul should be ok for this) then the actual nav elements will stay centered with the main content but the parent nav element spans full width.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me