Change logo on mobile version - 2017 update

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 :slight_smile:
Thanks,
Dobri

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!

1 Like

Thanks, that worked like a charm!

Hi @ddikov,

Happy to hear that.

Feel free to ask us again.

Thanks. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.