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

Community Forums Forums Design Tips and Tricks How to I make the header or footer stretch the full width of the screen?

This topic is: not resolved

This topic contains 5 replies, has 3 voices, and was last updated by  sebgates 1 year, 3 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #12863

    sebgates
    Participant
    Post count: 57

    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

    #12919

    SoZo
    Moderator
    Post count: 1573

    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

    #12924

    updatealan
    Participant
    Post count: 47

    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

    #12927

    SoZo
    Moderator
    Post count: 1573

    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

    #13250

    updatealan
    Participant
    Post count: 47

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

    #32225

    sebgates
    Participant
    Post count: 57

    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.