Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #207538

    What is the best way to have two different logo images in Enfold? I see that it is using an img link and not a css background. Should I use the mobile image in the Enfold theme settings and then use CSS to hide the mobile img and set the desktop logo as the background — or is there a better way?

    http://heartland.estlandpreview2.com

    #207756

    Hi Vada!

    With CSS, you could do something like:

    @media only screen and (min-width: 768px) {
    .logo{
    background: url("_DESKTOP_LOGO_");
    }
    }
    
    @media only screen and (max-width: 767px) {
    .logo{
    background: url("_MOBILE_LOGO_");
    }
    }

    Please provide us with both logos so we can give you a more specific code.

    Best regards,
    Josue

    #207798
    #207826

    Hey!

    You can add this on your Quick CSS or custom.css to change the background of the logo then remove the logo image on mobile device view:

    @media only screen and (max-width: 767px) {
    .responsive .logo {
    background: url('http://heartland.estlandpreview2.com/wp-content/themes/heartland/images/logo_header_mobile.png') no-repeat;
    position: relative;
    top: 50px;
    left: 30px;
    }
    
    .responsive .logo img {
    margin: 0 auto;
    display: none;
    }
    }

    Best regards,
    Ismael

    #208029

    Thanks for the CSS Ismael. That’s quality support!

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

The topic ‘Two logo images – one for desktop site and one for mobile’ is closed to new replies.