[Resolved] Different logo for mobile users?

Home Forums Support Different logo for mobile users?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #135894
    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

    #135900
    bdbrown

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

    #135905
    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

    #135906
    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.

    #135914
    fastjuly

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

    Warm regards,
    July

    #135921
    bdbrown

    You’re very welcome. Glad to help.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.