Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • May 19, 2014 at 1:25 am #266560
    Raleigh

    I would like to use a different logo(smaller and simpified) when the site is viewed ipad portrait size and below. I think the way to do this would be to recode how the logo is called in the header and make it a background-image instead of a img. That way I can target the background-image property using media queries.

    Is there another way with functions that you know of that might be easier that recoding how the logo is pulled?

    Thanks – Raleigh

    May 19, 2014 at 3:47 am #266624
    Ismael

    Hey pageladder!

    Thank you for visiting the support forum!

    You can directly use media queries to serve different logo for smaller screens but it will require a bit of modification and the full details of the task is beyond the scope of support. Please add this on Quick CSS or custom.css to get you started:

    @media only screen and (max-width: 979px) {
.responsive .mobile_slide_out .logo img {
display: none;
}

.responsive .mobile_slide_out .logo {
float: left;
background: url('MOBILE LOGO VERSION URL HERE');
background-size: 100% 100%;
width: 340px;
height: 80px !important;
}
}

    The first css declaration removes the default logo and on the second one, we’ll set the logo as background image. Just change the background image url and modify the height and width.

    Cheers!
    Ismael

    May 19, 2014 at 5:14 am #266638
    Raleigh

    Thank you Ismael – This was EXACTLY what I was looking for and worked for me perfectly once I set the correct height and width of the new background logo.

    Resolved.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Different Logo Version for Responsive Header’ is closed to new replies.