🎁 Get Up To 70% Off and a Free Prize During Divi Black Friday Sale! Get Divi

How to Display a Different Logo on Mobile in Divi

Blog, Divi Tutorial | 2 comments

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.

Divi Theme Options jquery code to change logo on mobile

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.

About the Author

The author of learnhowwp.com is a WordPress expert with over a decade of experience, specializing in Divi. Since 2014, they have built numerous WordPress sites and developed 8 Divi plugins with over 30,000 active installations. A former support team member at Elegant Themes, they launched learnhowwp.com in 2020 to share their in-depth knowledge of Divi. Now home to over 65+ articles dedicated to Divi tutorials and insights

2 Comments

  1. Nathan

    As with all things, as soon as I asked for it, I found a solution.

    I just did it through CSS.

    Sorry,
    Nathan

    Reply
  2. Nathan

    Hi,

    I’m using you code and it sort of work, but I’m also using EWWW Image Optimizer, which serves webp images. Because of this, it doesn’t show the replacement image from the jQuery code, but shows the standard logo. The replacement logo sits behind the webp image.

    I’ve added the URL in the form below.

    Cheers,
    Nathan

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Our Plugins Are Already Being Used On 30,000+ Amazing Websites.

We offer a 30 Day Money Back Guarantee on all plugins, so joining is Risk-Free!