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 9 months, 3 weeks 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 10 months, 1 week ago by  kryan2.
    • This topic was modified 10 months, 1 week ago by  kryan2.
    http://www.bucketlistnation.com
    #63102

    anitac
    Participant
    Post count: 6988

    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.


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

    #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.