Change logo on mobile version - 2017 update

[dsdthg]

Hi there!
I’ve spent the better part of the morning trying to figure this out.
I found a few topics back from 2014 and 2015 but they don’t seem to solve my issue.
I am trying to replace the logo image on my mobile site for https://mainacreatures.com
The site has Under Construction mode on and the bypass password is “CheckOutTheProgress”.
I want to replace the side logo with a smaller and different one when the site changes to mobile.
Can you please tell me what I’m doing wrong.
So far I’ve tried all variations of the following code to no success.

@media (max-width: 979px){
   a.x-brand.img img {
       display:none;
   }

   a.x-brand.img {
       display:block;
       background:url('image.png') top left no-repeat;
       width:300px;
       height:300px;
   }

}

I’d appreciate a pointer in the right direction
Thanks,
Dobri

[friech]

Hi Dobri,

Thank you for writing in, please use this JS code instead.

jQuery(document).ready(function($){
	var width = $(window).width();
	var logo_src = $(".x-brand img").attr("src");
	
	if(width < 980) {
		$(".x-brand img").attr("src", "MOBILE LOGO URL HERE");
	}
	else {
		$(".x-brand img").attr("src", logo_src);
	}
});

Replace the MOBILE LOGO URL HERE with your actual mobile logo URL.

You can add that on Theme Options > JS

Cheers!

[dsdthg]

@friech

jQuery(document).ready(function($){
var width = $(window).width();
var logo_src = $(".x-brand img").attr(“src”);

if(width < 980) {
	$(".x-brand img").attr("src", "MOBILE LOGO URL HERE");
}
else {
	$(".x-brand img").attr("src", logo_src);
}

});

Thanks, that worked like a charm!

[nico]

Hi @ddikov,

Happy to hear that.

Feel free to ask us again.

Thanks.