Full Width Header

Community Forums Forums Design Tips and Tricks Full Width Header

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  theorganicbird 11 months ago.

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

    theorganicbird
    Participant
    Post count: 4

    I am building a site in Pretty Young Thing. I have taken the header out from the wrap, and tried every little thing to get the header to run full width of the browser. I am still stuck with ~20 or px of margin around the header that I cannot find anywhere in the code (using firebug). I have tried every little trick of changing width, margin, etc. Any ideas of what I’m doing wrong? The site is currently behind a coming soon splash bc my client doesn’t want the site going live until it’s finished.

    #57848

    Derek
    Participant
    Post count: 46

    It’s hard to tell without being able to actually see the problem, but how have you done the full-width header? Is it custom CSS or are you using the Custom Header functionality found within some themes in the Dashboard under Appearance > Header?


    Derek Rippe – CSS Artist & Genesis Fanboy @ SynaVista and MediaCairn Design Studio
    Figure out your CSS problems with Firebug | Check out my Custom Comment Form Title plugin

    #59045

    theorganicbird
    Participant
    Post count: 4

    I’m trying to do it in Custom CSS. I’m using the Pretty Young Thing theme.

    #59049

    theorganicbird
    Participant
    Post count: 4

    This is the custom CSS I’ve added, but I’m still getting the white margins on either side of the header image. I literally have reached the point where I’m adding/changing every single kind of code I can think of to try and see what will change it from the Firebug side, but nothing is working…:

    #wrap {
    background-color: #fff;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    margin: 0 auto;
    width: 1300px;
    }

    #header {
    height: 155px;
    width: 1300px;
    margin: 0 auto;
    }

    #inner {
    padding: 0px 50px 0px 120px;
    overflow: hidden;
    width: 1292px;
    }

    .wrap {
    margin: 0 auto;
    width: 1300px;
    }

    body {
    width: 100%;
    }

    #header .wrap,
    #footer .wrap,
    #footer-widgets .wrap {
    margin: 0 auto;
    max-width: 960px; //This is the default Prose width, but you can change it if you want.
    }

    .header-full-width #title a {
    display: none !important;
    }

    #header #title {
    display: none !important;
    }

    .header-full-width #title-area {
    display: none !important;
    }

    #header {
    background: url(http://designhermomma.com/wp-content/uploads/2013/08/smallernarrow-DHM-header1.png) no-repeat !important;
    background-position: center;
    background-position: left 10px;
    display: block; /*Added this line*/
    margin-left: auto; /*Added this line*/
    margin-right: auto; /*Added this line*/
    }

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

You must be logged in to reply to this topic.