QUIK Web Design Blog

How to Change Logo in Menu on Scroll in Divi

Jan 26, 2023Tutorial Thursday

In this tutorial, I’ll be showing you How to Change Logo in Menu on Scroll in Divi. It’s a little more work (with code no less) than other tutorials I’ve posted, but still not difficult.

You can proceed with the step-by-step below (assuming you have a beginning understanding of Divi) and/or you can watch the YouTube video here: https://youtu.be/MdiJ9I_XSWo.

If you have any questions at the end, use the comments here or on YouTube!

Step 1
Prepare two versions of your logo to use in the Divi menu. For mine, I have a simple black one and a simple white one, as shown in the bottom right of the image (my Media Library) below. You’ll have to use the direct path to both files in the code in the next step, so just remember that and leave the Media Library open in it’s own tab for now.

How to Change Logo in Menu on Scroll in Divi - Media Library image

Step 2
Open a new tab and go to Divi / Theme Options, and then click on the “Integration” tab. Copy and paste the javascript below into the “Add code to the < head > of your blog” area and then save it.

Next change the image paths in the two lines (the var $fixedLogo and var $defaultLogo lines) that contain the image URLs. You can use the full path with https:// if you want. The $defaultLogo should be the logo that you want to show initially and the $fixedLogo is the one it will change to as you scroll down the page. Make sure you click the “Save Changes” button to save the code.

<script>
jQuery(function($){
$(function() {
    var $fixedLogo="/wp-content/uploads/2022/09/quik-icon-black.svg";
    var $defaultLogo="/wp-content/uploads/2022/09/quik-icon-white.svg";
    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> 
How to Change Logo in Menu on Scroll in Divi - Code Integration image

Step 3
Switch to another tab and view your home page and scroll down. Cross your fingers and your logo should have changed on scroll – like mine does as shown in the screenshots below, or on this actual page!

How to Change Logo in Menu on Scroll in Divi - Initial Logo image
How to Change Logo in Menu on Scroll in Divi - Scroll Logo image

Step 4
That’s it! You should see the logo in your menu switch on scroll now. It will switch back to the original logo if you scroll back to the top as well. Let me know what you think and if you have any issues, just ask for help!

How to Change Logo in Menu on Scroll in Divi - image

Cart

Archives

0 Comments