Different logo for mobile site


#1

Hello

I am wondering if it is possible to have a different logo appear in the mobile version of the site compared to the desktop version?

I think my logo looks great on the desktop version but it is a little difficult to read on the mobile version. It would be great to use a different one for each. Not a different sized one. A completely different version which is optimised for the mobile site.

Many thanks

Tom


#2

Hi,

Use this javascript snippet below:

var mobileLogoPath = 'https://s.w.org/style/images/about/WordPress-logotype-wmark-white.png';
var mobileLogo = '<img src="'+mobileLogoPath+" id="mobile-logo" style="display:none;max-height:120px;margin-left:auto;margin-right:auto;">';

jQuery(window).resize(function(){
	
if(jQuery(window).width() <= 576){
	jQuery('.site-branding img:not(#mobile-logo)').css('display', 'none');
	jQuery('.site-branding img#mobile-logo').css('display', 'block');
}else{
	jQuery('.site-branding img:not(#mobile-logo)').css('display', 'block');
	jQuery('.site-branding img#mobile-logo').css('display', 'none');
}
})

Add the code in your site using this plugin.

Regards,
Awan