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

  1.  Upload the mobile logo image in your media library. Then click on Edit link to edit the image.

This will open the Edit Media page. Highlight the File URL. You can do it by double clicking on it or by pressing Command + A (for Mac) or Ctrl + A (for Windows). 

Now right click on the highlighted url and copy it.

2. Go to Divi > Theme Options > Custom CSS box and add the following code in it,

@media only screen and (max-width: 981px) {
  #logo {
    content: url("http://yourwebsite.com/mobile_logo.png");
  }
}

In this code, replace the url part of the code with the url of the actual mobile logo image on your site. So, select this part, right click and paste the logo url you copied in first step.

That's it. Now, click on Save to save the changes and check your website on mobile to confirm that the mobile logo loads on it.

Did this answer your question?