Displaying a different logo on mobile devices in Divi can be done in two easy steps.
Upload the mobile logo image in your media library from WordPress Dashboard > Media. Then click on the logo image.
2. This will open the Attachment Details page of the logo. Click on the Copy URL to clipboard option under the File URL field in the right sidebar to copy the logo link.
2. Go to Divi > Theme Options > Custom CSS box and add the following code in it,
@media only screen and (max-width: 980px) {
#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 the 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. This would work for the default header of Divi.
Another Scenario: If you use a Menu Module to the global/custom header of the theme builder or it's added to a Divi builder page, then you can use the responsive content option of Divi to change the logo image for the tablet and mobile:
You can use the same responsive option to change the logo/image if you are using an Image Module or any other module.
Or you can use Divi's visibility option to create a different module for the tablet/mobile where you can add the logo specifically for the mobile and tablet and show a different one on the desktop. You can follow this guide to learn more: Different Layout For Small Screens.