How to change the logo depending on size screen

[kantech]

Hello community!

At the moment our logo is not so mobile friendly, so we created a new one especially for the mobile version. Its two different pictures. How can we tell the site to show the mobile friendly picture only for the mobile version of the menu. We looked around the new and old forum found some .js and css tricks but nothing works. We don’t want to resize it, but to show the second mobile friendly logo.

Thanks in advance

[christian]

Hey @kantech,

This would either or a combination of CSS media queries and Javascript. Regretfully, since this requires custom coding, this is outside the scope of our support. You might want to use Pro where this is possible out of the box since you can hide and show elements on different screen sizes.

Thanks.

[kantech]

In this thread: https://theme.co/apex/forums/topic/different-logo-for-mobile/ your team provided the customer with solution in the form of simple java script. When I am trying it - it’s not working Can you check it out and tell me why its not working for me? This bellow is the provided JS from you guys.

(function($) {
  if ($(window).width() < 980) {
    $(".x-brand img").attr("src", "http://kammscafe.com/wp-content/uploads/2016/03/kamms-cafe-logo-horizontal.png")
  }
})(jQuery);

Thanks in advance.

[christian]

Replace the image URL with your own image URL. The code you find in this forum serves only as a guide. Issues arising from the use of it and enhancements falls outside the scope of our support because they are not official parts of the theme. I’m sorry if my colleague did not make that clear.

Also, Pro is our answer if you like to build a custom header.

Thank you for understanding.