How to Add a Different Logo on Mobile View

Displaying a different logo on mobile devices in Divi can be done in a few easy steps.

First add the following to your custom CSS area in the Theme Customiser or into your Divi Child theme CSS area.
Divi > Theme Options > General > Custom CSS 

/** MOBILE LOGO **/
@media only screen and (max-width: 981px) {
 #logo {
 content: url("/wp-content/uploads/2019/05/bms-mobile-logo.png");
 }
}}

Then upload the mobile logo image in your media library. Click on Edit link to edit the image.
Copy and paste the image URL.

Lastly head back to Divi > Theme Options > General > Custom CSS
Change the URL in the code you previously pasted to the URL you just copied.

And that’s it!

I don’t include the site name when pasting as this may change when the site migrates from the testing environment, depending on the host.

We used a different logo for mobile on the following sites:

BMS Construction