Use Different Image Logo For Mobile

[rudy]

Hello, some popular themes have an option to chose a different logo for mobile.

I am using Experthive, and since there is not a pre-built option on theme to achieve this, let`s say I have 2 images:

main-logo.png

mobile-logo.png

Is there a css code that we can use to show a different logo for mobile only? for example, mobile-logo.png only for mobile, and main-logo.png for desktop/tablet size?

Thank you

[yevhen]

Please try this CSS snippet but please note that it can require further customization

@media screen and (max-width: 47.99em){
	.header-logo img{
		opacity: 0;
	}
	
	.header-logo{
		background-image: url('mobile-image-url-here');
		background-repeat: no-repeat;
		background-size: cover;
	}
}

[rudy]

It worked perfectly @yevhen thank you!