-
Posts
-
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?
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,
JosueHello Josue,
Here are the two logos
Desktop: http://heartland.estlandpreview2.com/wp-content/uploads/2013/12/logo_header.png
Mobile: http://heartland.estlandpreview2.com/wp-content/themes/heartland/images/logo_header_mobile.pngHey!
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
- The topic ‘Two logo images – one for desktop site and one for mobile’ is closed to new replies.