All Collections
FAQ's and Troubleshooting
How to Display a Different Logo on Mobile
How to Display a Different Logo on Mobile
Use a different logo on mobile in Divi header
Mayur avatar
Written by Mayur
Updated over a week ago

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?