On occasion you might have a logo that works beautifully on the desktop but looks like the ugly duckling on mobile. Well, with Divi, it’s really quite easy to switch your logo using a little bit of CSS.
The Mobile Logo
The first step is to upload a mobile version of your logo and copy the url of the image’s location. To find the file url, you’ll need to “edit” the image. Once you’re on the Edit Media page, you’ll see the File URL under the Save widget (normally on the right).
Click on the URL and then press Command + A (Mac) or Ctrl + A (Windows) and then either right click the highlighted text or use a keyboard shortcut to copy and paste it somewhere to use later.
The CSS
Now that you have the URL of the image you want to use on mobile devices, you need to place the following CSS into your child theme’s style.css file. If you aren’t using a child theme (and yes, you should be), head on over the Divi Theme Options panel and add the CSS to the Custom CSS field at the bottom of the page.
As you’ll see, there are two parts to this CSS and you might not need to use the second which restricts the width of the logo.
Now that you’ve got the CSS in place, head back to the URL of the image you want to use on mobile devices and replace the URL in the first piece of CSS.
Both these pieces of CSS use media queries to restrict their use to screens with a horizontal resolution of 980px or less.
Wrapping It Up
How easy was that? Now you can have a completely different logo on mobile devices to what you use of the desktop version of your site.
If you’re looking to play around a little more, check out my article called Increase The Size Of Your Divi Mobile Logo and Mobile Menu Text.
Photo by Maarten Deckers on Unsplash