Appfinite

Premium WordPress Themes for The Genesis Framework

Header/Logo responsive Question

Home › Community Forums › Adapt Theme Support › Header/Logo responsive Question

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 30, 2012 at 10:56 am #1298
    seth17
    Customer

    Hi Wes, I’m working on a site and having some issues with the responsive sections for the header/logo. Here’s the link to the site.

    I changed the header to be full width, here’s what’s in that section:
    #header {
    background-color: #ECCDF0;
    min-height: 150px;
    }

    #header .wrap {
    background: url(images/header.png) no-repeat;
    min-height: 150px;
    margin: 0 auto;
    overflow: hidden;
    width: 960px;
    }

    #title-area {
    float: left;
    overflow: hidden;
    padding: 17px 0 0;
    width: 600px;
    }

    #title {
    font-size: 48px;
    line-height: 58px;
    margin: 0;
    }

    In the two responsive sections, here’s what I’ve got:

    @media only screen and (max-width: 600px) {
    .header-image #title-area,
    .header-image #title,
    .header-image #title a {
    float: none;
    height: 100px;
    width: 100%;
    }

    .header-image #title-area {
    background: url(images/mobile-logo.png) top center no-repeat;
    margin: 0 0 20px;
    }

    #title-area {
    float: none;
    text-align: center;
    width: 100%;
    }

    and:
    @media only screen and (min-width: 600px) and (max-width: 960px) {

    .header-image #title-area,
    .header-image #title,
    .header-image #title a {
    float: none;
    width: 100%;
    }

    .header-image #title-area {
    background: url(images/logo.png) top center no-repeat;
    margin: 0 0 20px;
    }

    #title-area {
    padding: 10px 0 20px;
    }

    I’ve used this basic code in the past for the responsive logo/header, but never changed the header wrap to be full width, so I’m guessing that’s where my issue is, but haven’t been able to correct it. Any suggestions would be most appreciated!

    August 30, 2012 at 9:14 pm #1299
    Wes
    Moderator

    Here’s how to fix it (assuming you want the 2nd/responsive logo to center)

    1.  The #header .wrap logo needs to be set to “background: none;” in the responsive section of the css since its showing up twice behind the responsive logo.

    #header .wrap  {
    background: none;
    }

    2. You also need to add width: 100%; to the #header .wrap as well. Currently it is still using the width: 960px; which is why this entire area isn’t resizing due to the fixed width. So adding the 100% percentage will allow the responsive logo to adjust/respond like its supposed to.

    #header .wrap  {
    background: none;
    width: 100%;
    }

    August 30, 2012 at 10:22 pm #1300
    seth17
    Customer

    Thanks Wes, worked like a charm!

    August 30, 2012 at 10:23 pm #1301
    Wes
    Moderator

    You’re Welcome

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Header/Logo responsive Question’ is closed to new replies.