How to I make the header or footer stretch the full width of the screen?

[sebgates]

Hi, I would like to know if anyone knows how to create full screen width footers or header/nav bars like the Studiopress website has? It is easy to do this in Bootstrap, but I am new to the Framework and would like a few pointers if someone has done it before.

thanks - seb

[SoZo]

If you remove the width from #wrap then they will span the viewport. You'll need to add widths and auto left/right margins to elements you want to have centered.

---

John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

[updatealan]

Sozo...  Thanks for responding to seb's posting.  Do you know if this will work on an AgentPress 2.0 Child Theme?  I'm pasting the Stylesheet (stylesheet.css) code below:

/* Wrap
------------------------------------------------------------ */

#wrap {
margin: 0 auto;
overflow: hidden;
}

/* Header
------------------------------------------------------------ */

#header {
color: #fff;
margin: 0 auto;
min-height: 125px;
text-shadow: 1px 1px #000;
width: 960px;
}

On the same topic, I'd like for the Primary Navigation bar to span the the viewpoint, as well.  Here is the Stylesheet (stylesheet.css) code for that:

/* Primary Navigation
------------------------------------------------------------ */

#nav {
-moz-box-shadow: 0 1px 1px #000;
-webkit-box-shadow: 0 1px 1px #000;
background-color: #273549;
box-shadow: 0 1px 1px #000;
clear: both;
color: #fff;
font-size: 13px;
margin: 0 auto;
overflow: hidden;
width: 960px;
}

#nav ul {
float: left;
padding: 0 0 0 10px;
width: 950px;
}

#nav ul ul {
padding: 0;
}

#nav li {
float: left;
list-style-type: none;
}

#nav li a {
color: #fff;
display: block;
padding: 9px 15px;
position: relative;
text-decoration: none;
}

#nav li a:hover,
#nav li a:active,
#nav .current_page_item a,
#nav .current-cat a,
#nav .current-menu-item a {
background-color: #fff;
color: #273549;
}

#nav li a .sf-sub-indicator {
display: block;
overflow: hidden;
position: absolute;
text-indent: -9999px;
}

#nav li li a,
#nav li li a:link,
#nav li li a:visited {
background-color: #fff;
border: 1px solid #ccc;
border-top-width: 0;
color: #273549;
font-size: 12px;
padding: 6px 10px 4px;
position: relative;
text-transform: none;
width: 138px;
}

#nav li li a:hover,
#nav li li a:active {
background-color: #273549;
color: #fff;
}

#nav li ul {
height: auto;
left: -9999px;
margin: 0 0 0 -1px;
position: absolute;
width: 160px;
z-index: 9999;
}

#nav li ul a {
width: 140px;
}

#nav li ul ul {
margin: -33px 0 0 159px;
}

#nav li:hover>ul,
#nav li.sfHover ul {
left: auto;
}

/* Primary Navigation Extras
------------------------------------------------------------ */

#nav li.right {
float: right;
margin: 0 10px 0 0;
padding: 10px 10px 8px;
}

#nav li.right a {
background: none;
border: none;
color: #fff;
display: inline;
text-decoration: none;
}

#nav li.right a:hover {
color: #4b8308;
text-decoration: none;
}

#nav li.search {
padding: 0 10px;
}

#nav li.rss a {
background: url(images/rss.png) no-repeat center left;
margin: 0 0 0 10px;
padding: 0 0 0 16px;
}

#nav li.twitter a {
background: url(images/twitter-nav.png) no-repeat center left;
padding: 0 0 0 20px;
}

* * * * * * *

Thank you!
Best,
Alan

[SoZo]

Agentpress doesn't have a width set for #wrap so you need to remove the width from the elements that you want to span the viewport, e.g. for #nav remove the width and then add a width and auto left/right margins for #nav .wrap

---

John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

[updatealan]

I got it figured out.  Thanks for your help, SoZo.  I'm new to WordPress, and your help is much-appreciated.

[sebgates]

SoZo, I created a site with your instructions:

I am using the Sample theme. I am trying to make  a wide style layout: http://irishherbalist.xl-websites.com/ . I removed the max width of the wrap and then added the ‘margin 0′ ‘max width 1152px’ to the other inner elements. Everything seems OK apart from the site title and the right hand widget area in the header. I have tried a number of tricks to get the site title to align left above the main body of text and the same with the right hand widget. Basically what I am trying to do is make the header, title and right hand widget behave the same way it does when the wrap is 1152px as if the page were a normal rectangle. How can I resolve the problem I am having with the header?

Thanks - Seb

[Author]

Posts