Different Logo for Desktop vs. Mobile
URL to the page in question:
http://paperboy.marketing
-
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
Good Morning James,
It is possible to do that. Here’s how:
- 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.
- Go to your theme options page and choose the Advanced tab.
- 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;
}
}
- Replace the
http://yoursite.com/image.png
with the URL to your smaller logo.
- 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
Thanks Bill! That worked perfectly.
Glad to hear that worked out of you James. Let me know if you need anything else ?
- The topic ‘Different Logo for Desktop vs. Mobile’ is closed to new replies.