[PeteGWebmaster]

Hello, I would like to have a different site logo for mobile than desktop version of website.

I have come to the conclusion that with this template, a square logo works best on mobile and wide rectangular banner works best on desktop version.

Can you please assist? Here‘s a link to the site.

Thank you.

[Skandha]

@petegwebmaster: It is not possible to add two logos one for mobile view and one for desktop view. However what you can do is add a logo and a header image. On mobile view you can display the site logo and hide the header image and on desktop view you can display the header image and hide the site logo. This way you can get a square image on mobile view and rectangular image on desktop view.

After adding site logo and header image.
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (max-width:991px) {
	#header-featured-image {
		display:none ;
	}
}
@media screen and (min-width:991px)  {
	#site-logo {
		display:none;
	}
}

Let me know if this works out for you.
Kind Regards,
Skandha

[Author]

Posts