In this short tutorial I will share the steps to show a different logo on mobile in the Divi theme.

There are other articles on how you can change the logo with CSS. But the CSS code does not work on the Firefox Browser. Which is why in this article instead of using CSS we will be using jQuery to change the logo for phones.

If you are looking for the jQuery code to change the logo on scroll then you can check the article change logo on scroll in Divi from our blog.

jQuery Code to Display a Different Logo on Mobile

Showing a different logo in the menu on phones is easy. You have to add one snippet of code to your website.

Go to your WordPress Dashboard > Divi > Theme Options > Integration > Add code to the < head > of your blog and then add the following code.

<script>
jQuery(function($) {
    $(function() {
        var $mobileLogo = "Enter the URL for Fixed Logo Here";
        var $header = $('#main-header');

        if (jQuery(window).width() <= 767) {
            $header.find('#logo').attr('src', $mobileLogo);
        }
    });
});
</script>

Here is a screenshot to help you with where to add the code in the Theme Options.

You have to add the link to your logo image that you want to show on phones in the code. You have to edit the following line of code and include the logo image in the quotes.

var $mobileLogo = "Enter the URL for Fixed Logo Here";

The breakpoint in the Divi theme for mobile phones is 767px. If you want to extend this to tablets then all you need to do is to change it to 980px.

if (jQuery(window).width() <= 767) {

If you want the code to take affect only on smaller phone resolutions only then you can decrease this value to 480px.

Next you might like to read another Divi related tutorial

1. How to add a Call To Action Button to Divi Menu
2. 3 Beautiful Hover Effects for Divi Menu Module
3. How to create an Image Carousel in Divi

Leave a comment below if you have any questions. Don’t forget to subscribe to the Newsletter to receive the latest tutorials in your inbox.