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

Looking to get your business seen? Then see us.

Web Site Developer Auckland | North Shore | Matakana | Warkworth | Omaha

Call 021 158 1400 for Web Design North Shore, Auckland

Share This