Use Different Image Logo For Mobile

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:



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

1 Like

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;
		background-image: url('mobile-image-url-here');
		background-repeat: no-repeat;
		background-size: cover;
1 Like

It worked perfectly @yevhen thank you!

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