Ensuring your website looks great on all devices often requires customizing elements for mobile users. One effective customization is displaying a different logo image on mobile devices.
In this article, we will guide you through the process of using Divi's Menu Module to display a different logo image on mobile devices and changing the logo image using custom CSS Code.
Display a different Logo image on mobile devices using the Menu module
Open the Menu module settings by clicking on the Gear icon
Go to the Content tab → Logo and upload your logo image
Enable the Responsive Settings for the Logo option by clicking on the Phone
iconClick on the Phone tab
Replace the Logo image with the one that you want to show on mobile devices
Display a different Logo image on mobile devices using a custom CSS code
Notes:
This can be used if you are using the default Divi's Header layout
If you are using the Menu module, use the previous steps
Go to WordPress Dashboard → Media
Click on the Add New button to upload a new image
Upload the image that is going to be used as the mobile logo image
Click on the image (once it is uploaded) and click on the Copy URL to Clipboard
Go to Divi → Theme Options → General Tab → Custom CSS and add this CSS code:
@media (max-width: 767px) {
#logo {
content: url("http://yourwebsite.com/mobile_logo.png");
}
}
Note: In the above CSS code, replace http://yourwebsite.com/mobile_logo.png with the actual image URL that you want to display on mobile devices.