为移动版使用不同的徽标

Question

I would like to use a different logo for my mobile version.

I found out that you add another logo in your HTML source code and then define in CSS which logo is shown based on page size.

My problem is that I use Wordpress and can't really access the source code. I can only write something in the functions.php file.

My logo is places in the navigation bar, which makes it more difficult, too.

Would be soooo thankful for any help :)
Daniel

My Page

Answer 1

Yes you can use media queries to do that for example :

.mobile-logo-class { 
  display:none;
}

@media screen and (max-width: 768px) { // 768px or your break point

    .mobile-logo-class { 
      display: inline-block; // or block
    }

   .desktop-logo-class {
      display:none;
   }

}

Or you can use the "Picture" tag but be careful for IE Support: https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015