How to wrap header

Community Forums Forums Design Tips and Tricks How to wrap header

This topic is: not resolved

This topic contains 3 replies, has 3 voices, and was last updated by  spoll 11 months, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #62941

    kryan2
    Participant
    Post count: 3

    Hi there!

    My website is http://www.bucketlistnation.com

    How do I get the header to wrap out so that there is no “white space” on the sides when you are viewing it in a browser window?

    I want it to look like this if possible: http://www.marieforleo.com/

    Any help is much appreciated!

    • This topic was modified 11 months, 2 weeks ago by  kryan2.
    • This topic was modified 11 months, 2 weeks ago by  kryan2.
    http://www.bucketlistnation.com
    #63102

    Anita
    Participant
    Post count: 7574

    The current header width is 960px. You can change that to 100% and it will fill, however, keep in mind that your image now has to be wider than what you currently have there.


    When asking for help, please provide a link or screen shot showing your problem!
    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me!

    #63112

    kryan2
    Participant
    Post count: 3

    Thanks for your help!

    I updated everything that said 960 px on the function.php and style.css files. For some reason, it is still cropping my images at 960 px. Am I missing anything?

    /* Header
    ———————————————————— */

    #header {
    margin: 0 auto;
    min-height: 535px;
    overflow: visible;
    width: 100%;
    background: url(images/bg.png);
    }

    #title-area {
    float: left;
    overflow: hidden;
    padding: 30px 0 25px;
    width: 480px;
    }

    #title {
    font-family: ‘Pacifico’, arial, serif;
    font-size: 48px;
    line-height: 60px;
    margin: 0 0 5px;
    text-shadow: #fff 1px 1px;
    }

    .header-full-width #title {
    text-align: center;
    }

    #title a,
    #title a:hover {
    color: #8f8d85;
    text-decoration: none;
    }

    #description {
    color: #938868;
    font-size: 14px;
    font-style: italic;
    text-shadow: #fff 1px 1px;
    }

    .header-full-width #description {
    text-align: center;
    }

    #header .widget-area {
    float: right;
    width: 470px;
    }

    /* Image Header – Partial Width
    ———————————————————— */

    .header-image #title-area,
    .header-image #title,
    .header-image #title a {
    display: block;
    float: left;
    height: 535px;
    overflow: hidden;
    padding: 0;
    text-indent: -9999px;
    width: 100%;
    }

    .header-image #description {
    display: block;
    overflow: visible;
    }

    /* Image Header – Full Width
    ———————————————————— */

    .header-full-width #title-area,
    .header-full-width #title,
    .header-full-width #title a {
    width: 100%;
    }

    /* Navigation Constants
    ———————————————————— */

    li:hover ul ul,
    li.sfHover ul ul {
    left: -9999px;
    }

    li:hover,
    li.sfHover {
    position: static;
    }

    li a .sf-sub-indicator {
    position: absolute;
    text-indent: -9999px;
    }

    /* Header Right Navigation
    ———————————————————— */

    #header ul.nav,
    #header ul.menu {
    float: right;
    }

    #header ul.nav ul,
    #header ul.menu ul {
    float: right;
    margin: 0;
    padding: 0;
    width: 100%;
    }

    #header ul.nav li,
    #header ul.menu li {
    background-color: #666;
    float: left;
    list-style-type: none;
    text-transform: uppercase;
    }

    #header ul.nav li a,
    #header ul.menu li a {
    color: #fff;
    display: block;
    font-size: 13px;
    padding: 7px 10px 5px;
    position: relative;
    text-decoration: none;
    }

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

    #header ul.nav li li a,
    #header ul.nav li li a:link,
    #header ul.nav li li a:visited,
    #header ul.menu li li a,
    #header ul.menu li li a:link,
    #header ul.menu li li a:visited {
    background-color: #666;
    border: 1px solid #666;
    border-top-width: 0;
    color: #fff;
    font-size: 12px;
    padding: 5px 10px;
    position: relative;
    text-transform: none;
    width: 148px;
    }

    #header ul.nav li li a:hover,
    #header ul.nav li li a:active,
    #header ul.menu li li a:hover,
    #header ul.menu li li a:active {
    background-color: #000;
    }

    #header ul.nav li ul,
    #header ul.menu li ul {
    height: auto;
    left: -9999px;
    position: absolute;
    width: 170px;
    z-index: 9999;
    }

    #header ul.nav li ul a,
    #header ul.menu li ul a {
    width: 150px;
    }

    #header ul.nav li ul ul,
    #header ul.menu li ul ul {
    margin: -33px 0 0 169px;
    }

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

    #64455

    spoll
    Participant
    Post count: 42

    Hi-I see you’ve succeeded, I’m trying to find the answer myself, how did you do it?

    Thanks

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

You must be logged in to reply to this topic.