Different logo on mobile device

  • Resolved samovaari

    (@samovaari)


    1 year, 9 months ago

    Hi! We are trying to show a different logo for the mobile version of the website. We have tried the following code in our CSS without success:

    @media only screen and (max-device-width : 640px)
{
     /* style here apply for screen width up to 600px */
     .site-title
     {
         background-image: url('/img/logo.png');
     }
}

@media only screen and (min-device-width : 640px)
{
     /* style here apply for screen width above 600px*/
     .site-title
     {
         background-image: url('/img/logo-big.png');
     }
}

    This is found in our header.php if it helps:

    <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php echo get_template_directory_uri() . '/img/logo.png';?>" /></a></p>

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • The CSS code provided will only alter the background of the p class and not the logo being called in header.php.

    To address this issue, you can try the following revised code snippet. It is recommended to use a child theme to avoid losing your changes during future updates.

    To update your header.php file, replace:

    

<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php echo get_template_directory_uri() . '/img/logo.png';?>" /></a></p>

    with:

    <p class="site-title">
  <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
    <?php if ( wp_is_mobile() ) : ?>
      <img src="<?php echo get_template_directory_uri() . '/img/mobile-logo.png';?>" alt="Mobile logo" />
    <?php else: ?>
      <img src="<?php echo get_template_directory_uri() . '/img/logo.png';?>" alt="Desktop logo" />
    <?php endif; ?>
  </a>
</p>

    In this code, the wp_is_mobile() function checks if the user is browsing from a mobile device. If it returns true, the code displays the mobile-logo.png image, otherwise it displays the logo.png image.

    Note: Make sure you have both logo.png and mobile-logo.png files in your theme’s img directory.

    Thread Starter samovaari

    (@samovaari)

    Thank you very much @abretado1985, appreciate your in depth reply! ??

    Thanks this solution worked for my website.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Different logo on mobile device’ is closed to new replies.