Different Logo for Desktop vs. Mobile

[James Harper]

Hi Bill,

The logo I’m using is fairly wide, so the menu button sits on top of it while in mobile view. Can you help me adapt the fix you provided here (https://support.organizedthemes.com/forums/topic/different-logos/) so I can display a smaller logo for mobile view?

Thanks!

James

[Bill Robbins]

Good Morning James,

It is possible to do that. Here’s how:

1. Go to the Media Section in your WordPress dashboard and select Add New. Upload the image you’d like to use. Once the upload is complete, click on the edit link. Look on the right hand side of the screen that opens up for the File URL. We’ll need that in just a minute.
2. Go to your theme options page and choose the Advanced tab.
3. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (max-width: 520px) {
   
   	#logo img {
   		visibility: hidden;
   	}
   	
   	#logo {
   		background: url(https://yoursite.com/image.png) left center no-repeat;
   		background-size: contain;
   	}
   	
   	#logo a {
   		float: left;
   	}
   
   }
   

4. Replace the http://yoursite.com/image.png with the URL to your smaller logo.
5. Update your settings.

That should swap out your logo for a smaller one on smaller screens. You can change the threshold where the change is made by altering the 520px that’s at the top of the snippet above. If you run into any trouble or questions, let me know.

Have a great weekend,
Bill

[James Harper]

Thanks Bill! That worked perfectly.

[Bill Robbins]

Glad to hear that worked out of you James. Let me know if you need anything else ?

[Author]

Posts