为移动版使用不同的徽标

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

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

In normal case, if your theme provides the options for mobile logo then you can upload different logo for your mobile sections,

if there are not options for the mobile logo into your theme then you can use media queries to set the path for mobiles width or you can use the plugins to show different logo for your website in mobile something like this. https://wordpress.org/plugins/rocket-wp-mobile/

STEP 1: OK first copy the code of logo in your header file which one calling the log on your desktop, copy the code and paste it below the same dive now remove the PHP code and change the div class, and give there <img src=" your image path"> and save it. you can write HTML too for image

STEP 2: Now in CSS use CSS for hiding it. something like

.logo2-img {
    display: none;
}

here logo2 is your 2nd div class .

STEP 3: Now write css with media query

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

    .logo2-img{ 
      display: block; //
    }

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

}

thats it sorry for poor English