In this article we will change the logo on scroll in the Divi Header. Elegant Themes have a tutorial on their website that uses Custom CSS code. However the code from the article does not work on the Firefox Browser.

We are going to use jQuery code to change the logo which will work across all the latest browsers. As a bonus we will also take a look at how to change the logo on this custom Divi header created using the Theme Builder.

Switching the Logo on Scroll in the Default Divi Header

Switching the logo in the default Divi Header is simple. Go to your WordPress Dashboard > Divi > Theme Options > Integration > Add code to the < head > of your blog and add the following code inside it.

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

    $(window).scroll(function() {
        if($header.hasClass('et-fixed-header'))
$header.find('#logo').attr('src',$fixedLogo);
        else
$header.find('#logo').attr('src',$defaultLogo);
    });
});
});
</script>	

If you are not sure where to add the code then here is a screenshot.

You will have to place the link for the fixed logo and the default logo in the code to make it work. And that’s it we are done.

It might be obvious to a lot of people where to add the links but if you are not sure here is how.

In the above code you can see the following two lines of code. You need to replace the entire text “Enter the URL…” with a link to your fixed and default logo.

var $fixedLogo="Enter the URL for Fixed Logo Here";
var $defaultLogo="Enter the Logo for Default Logo Here";

You need to add the link inside the quotes otherwise the code will need work. Here is how the code might look after you have added your links.

var $fixedLogo="http://yourwebsite.com/et/wp-content/themes/Divi/images/Fixedlogo.png";
var $defaultLogo="http://yourwebsite.com/et/wp-content/themes/Divi/images/Defaultlogo.png";

Changing the Logo on Scroll in Divi 4.0 Header

By default the Divi 4.0 Header is not fixed. There are a couple of ways to make the Custom Header built with Divi 4.0 Fixed. You can read about them in the Post How to Make Your Custom Divi 4.0 Header Fixed or Sticky

The easiest way is to make it fixed using the Position Options. However simply setting the Position to Fixed does not help identify the Section that contains menu module. To be able to change the logo on scroll you will need to follow the second set of instructions from the article linked above.

After following the steps under Fixed Header Using CSS & jQuery Code from the article you just need to add the following code.

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

<script>
jQuery(function($) {
    $(function() {
        var $fixedLogo = "Enter the URL for Fixed Logo Here";
        var $defaultLogo = "Enter the Logo for Default Logo Here";
        var $header = $('#main-header');
        $header.find('.et_pb_menu__logo img').removeAttr('srcset');
        $header.find('.et_pb_menu__logo img').removeAttr('sizes');

        $(window).scroll(function() {
            if ($header.hasClass('et-fixed-header'))
                $header.find('.et_pb_menu__logo img').attr('src', $fixedLogo);
            else
                $header.find('.et_pb_menu__logo img').attr('src', $defaultLogo);
        });
    });
});
</script>	

Like the code from the Divi default header section you need to set your own links in this code too. You need to replace the text “Enter the URL…” with links to your default and fixed logo.

var $fixedLogo = "Enter the URL for Fixed Logo Here";
var $defaultLogo = "Enter the Logo for Default Logo Here";

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.