Different logo for mobile users?

[fastjuly]

Hi!

Is it possible to show a different Logo for mobile users? My Desktop Logo has some writings which are to small to read for mobile users. So I’d like to show a completely different Logo for mobile users.

I tried something like this

@media screen and (max-width: 768px) {
      .site-header {
            background-image: url(URL TO DIFFERENT IMAGE);
      }
}

But I don’t know how to rewirte it so it fits for the logo image.

It would be really great if there is a solution 🙂

Thanks in advance and
best regards,
July

[bdbrown]

Hi July. Take a look at this post for some information on the same question.

[fastjuly]

Hi bdbrown!

Thanks for your reply.

With the following code it looks like we’re on the right way.

<div class="hide-on-mobile">
      <div class="site-logo">
            <img src="URL TO YOUR DESKTOP LOGO IMAGE" alt="" />
      </div>
</div>
<div class="hide-on-desktop">
      <div class="site-logo">
            <img src="URL TO YOUR MOBILE LOGO IMAGE" alt="" />
      </div>
</div>

But to be honest, I can’t help myself with this code. Where do I have to place the code? Also, how does the browser know which logo is the right one? As there is no rule for mobile or desktop.

Thanks!
July

[bdbrown]

The HTML for the two logos goes in the GP Hooks “Before Header Content” hook. GP Hooks is one of the available Add-ons. The theme has code to display the correct logo based on the designated class. I think the Add-ons are a great value but, as an alternative, you could add this action to a child theme functions.php file:

add_action('generate_before_header_content','generate_insert_different_logos');
function generate_insert_different_logos() { ?>
   <div class="hide-on-mobile">
      <div class="site-logo">
         <img src="path-to-your-desktop-logo.jpg" alt="Your site title" />
      </div>
   </div>
   <div class="hide-on-desktop">
      <div class="site-logo">
         <img src="path-to-your-desktop-logo.jpg" alt="Your site title" />
      </div>
   </div>
<?php
}

Hope that helps.

[fastjuly]

That’s great bdbrown, that helped me alot! Thanks for your efforts 🙂
The support here is truly amazing!

Warm regards,
July

[bdbrown]

You’re very welcome. Glad to help.

[Author]

Posts