Archived topic

Different logo for mobile users?

5 replies · Started by Anonymous on September 10, 2015

Viewing posts 1–6 of 6

September 10, 2015 at 12:29 pm #135894

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

September 10, 2015 at 1:26 pm #135900

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

September 10, 2015 at 1:52 pm #135905

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

September 10, 2015 at 2:30 pm #135906

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.

September 10, 2015 at 3:32 pm #135914

That's great bdbrown, that helped me alot! Thanks for your efforts :-)
The support here is truly amazing!

Warm regards,
July

September 10, 2015 at 3:57 pm #135921

You're very welcome. Glad to help.

This archived topic is closed to new replies.

Start building better websites today.