Display a different logo on mobile and desktop?

Question

I'm looking to change the logo on my header on a mobile. This is the code from the current header that shows up on both the desktop and the mobile (on desktop it's the link back to the home screen). Is there any easy way of changing it on just the mobile version?

HTML:

<div id="mainlogo">
<a class="main logo" href="http://sheisbiddy.com/home/" title="Main Logo" alt="main logo">
<img src="http://sheisbiddy.com/wp-content/uploads/2016/01/SHEISBIDDY-main-logo-smaller-6.png" border="0" alt="" />
</a>

CSS:

#mainlogo {text-align:center;}

Appreciate it guys!

score 19 · Accepted Answer · answered Jan 25 '16 at 03:54

You can use a media query and selectively show/hide elements. Your html would have both logos in the markup, and your CSS would define which logo is shown depending on screen size.

For example:

<style>
  /* hide mobile version by default */
  .logo .mobile {
    display: none;
  }
  /* when screen is less than 600px wide
     show mobile version and hide desktop */
  @media (max-width: 600px) {
    .logo .mobile {
      display: block;
    }
    .logo .desktop {
      display: none;
    }
  }
</style>

<div class="logo">
  <img src="/images/logo_desktop.png" class="desktop" />
  <img src="/images/logo_mobile.png" class="mobile />
</div>

This sounds like it would be bad for performance since you'd be loading both logos all the time — ihor.eth, Jan 30 '23 at 17:53

score 7 · Answer 2 · answered Apr 26 '19 at 13:18

If you are using Bootstrap then I have a very simple solution by only using a few Bootstrap classes :

<div id="mainlogo">
 <img src="/images/logo_desktop.png" class="d-none d-lg-block" />
 <img src="/images/logo_mobile.png" class="d-lg-none" />
</div>

You can see the details here: https://getbootstrap.com/docs/4.0/utilities/display/

score 0 · Answer 3 · answered Jan 25 '16 at 03:55

You can put both images in the <a> element, and show / hide with CSS media queries. For example...

HTML:

<div id="mainlogo">
  <a class="main logo" href="http://sheisbiddy.com/home/" title="Main Logo" alt="main logo">
    <img class="hidden-mobile" src="[source for desktop logo]" border="0" alt="" />
    <img class="hidden-desktop" src="[source for mobile logo]" border="0" alt="" />
  </a>
</div>

CSS:

@media all and (min-width: 768px) {
  .hidden-desktop {
    display: none !important;
  }
}

@media all and (max-width: 767px) {
  .hidden-mobile {
    display: none !important;
  }
}

If this is a project you're working on from scratch, consider using a front end framework like Bootstrap - there are plenty of great utility classes to handle responsive functionality.

This is not a good way, as both images are loaded, sharing the bandwidth and have impact on page load time. — Peyman Mohamadpour, Jan 25 '16 at 03:58

Peyman Mohamadpour · Answer 4 · 2016-01-25T04:02:06.960

If you just want to use CSS, you may do it using CSS media queries:

Markup

<div id="mainlogo">
    <a class="main logo" href="">
        <div class="logoImage"></div>
    </a>
</div>

CSS (mobile fisrt)

.logoImage{
    background-image: url( 'path/to/mobile/version/of/image.jpg' );
}

@media screen and (min-width:401px){
    .logoImage{
        background-image: url( 'path/to/desktop/version/of/image.jpg' );
    }
}

score 0 · Answer 5 · answered May 31 '20 at 16:39

if you are using bootstrap, there is a simple and fast method I have used, use 2 tag, hide 1st image in mobile by using class "d-none d-sm-block" and hide 2nd image in desktop by using class "d-block d-sm-none" check the code below:

<div>
<img  src="img5.jpg"  class="d-none d-sm-block"  />

<img src="img5-mobile.jpg"  class=" d-block d-sm-none" />
</div>

Display a different logo on mobile and desktop?

5 Answers5

Linked

Related