🎁 Save 50% With Divi Pro When You Join Today! 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.

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);

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.


  1. Nathan

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

    I just did it through CSS.


  2. Nathan


    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.



Submit a Comment

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

Divi Hosting Recommended By Elegant Themes

Get Started From Just $1.99 Per Month