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 lin

Answer 1

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>

Answer 2

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/

Answer 3

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.

Answer 4

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' );
    }
}

Answer 5

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>