• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

Header/Logo responsive Question

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

  • This topic has 3 replies, 2 voices, and was last updated 9 years, 11 months ago by Wes.
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.

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now →

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us →

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2022 · Appfinite · Built With The Genesis Framework