Different logo image for mobile/desktop?

Support
#1

How can I set different logos for desktop and mobile?

For desktop the logo my client wants is huge but when on mobile it shrinks to the point it’s too small.

#2

Hi @jrdn,

Thanks for writing in.

You can follow this post on how to create a different logo in mobile.

Let us know how it goes.

Thanks

#3

What do I do with this code?

I know I put it in the additional CSS code but how do I select a picture to use for mobile?

#4

Hi there,

You will have to check what CSS selector to use to target the image you want to style.

You can find more info here.

#5

I’m trying to follow this thread https://theme.co/apex/forum/t/make-a-different-logo-for-mobile/4908/7

I tried using the same code and switching out the image file but the code seems to put the image behind the logo instead of replacing it.

#6

Hi There,

That means the original logo was not hidden, please add the custom CSS below.

@media (max-width: 767px) {
	.x-brand img {
		opacity: 0 !important;
	}
}

If that did not work, please provide us your site URL.

Thanks,