In this tutorial I’ll show you how to swap your logo when scrolling down using the Divi theme in WordPress with vanilla JavaScript and CSS. This can be a good way to use the reduced space on the fixed-header in Divi if it works with your design or just show an alternate version of your logo. I wanted to find a way to switch out my logo when scrolling down that was compatible with modern browsers including Firefox so this is the solution I found to be the most effective.

This tutorial should help get you started in the right direction if you are trying to accomplish this. This is most useful if you are using the default Divi fixed-header and default header layout. I have not tried this yet using Divi’s new theme builder for a custom header so I’m not sure if the same methods will work there. Check out the example video below to see the logo swap effect:

Getting Started

You’ll want to make sure you are using a child theme so you can store your custom CSS safely. Make sure you are using the latest version of Divi as well. In addition, make note of the URL paths to your main and alternate logos.

Make sure your main logo is set in the Divi Theme Options window and Fixed Navigation Bar is enabled:

Set the Stage with JavaScript

By default Divi does not add a class to id #logo in the header so the first thing we’ll do is add a custom class to the logo when the page loads. This way, you can control any custom styling you want to apply to the logo initially with CSS. Add this code under Divi > Theme Options > Integration Tab > Add code to the < head > of your blog:

<script>
var logoContainer = document.querySelector('#logo');

function addInitialClass() {
    logoContainer.classList.add('sc-main-logo');
}

document.addEventListener('DOMContentLoaded', function () {
    addInitialClass();
})
</script>

Our next step is to add a function that swaps the logo when a user scrolls down. Here I have changed the scroll value to trigger after the user has scrolled 88px down, but you can change it to a value that works for you and your design. This function adds and removes classes and changes the logo image in the id #logo inside the header (and fixed-header). You’ll want to enter the URL for your main logo image first first and the alternate logo image second. Add this code in the same section under the last snippet:

<script>
function swapHeaderLogo() {
    window.addEventListener('scroll', function () {
        var topPos = document.documentElement.scrollTop;
        if (topPos < 88) {
            logoContainer.src = '/wp-content/uploads/sc-main-logo.svg';
            logoContainer.classList.remove('sc-alternate-logo');
            logoContainer.classList.add('sc-main-logo');
        } else if (logoContainer.classList == '') {
            logoContainer.classList.add('sc-main-logo');
        } else {
            logoContainer.src = '/wp-content/uploads/sc-alternate-logo.svg';
            logoContainer.classList.remove('sc-main-logo');
            logoContainer.classList.add('sc-alternate-logo');
        }
    })
};

swapHeaderLogo();
</script>

Add Your CSS

Now that we have the classes and images changed behind the scenes, we can style and animate them using CSS. You'll want to want to add this CSS code to your child theme's style.css file which can be found in the WordPress dashboard under Appearance > Theme Editor > style.css.

First we want to apply default sizing and positioning to both logos:

.sc-main-logo {
    min-height: 150px;
    margin-top: 0;
}

.sc-alternate-logo {
    min-height: 60px;
    margin-left: -20px;
    margin-top: 0px;
}

Then, using keyframe animations, we'll animate the logos to slide-in and fade-in based on the class names that JavaScript changes:

/* Animate alternate logo */
@-webkit-keyframes alternate-logo-animate-in {
    0% {
        opacity: 0;
        margin-left: -800px;
        min-height: 60px;
    }

    100% {
        opacity: 1;
    }
}

.sc-alternate-logo {
    -webkit-animation: alternate-logo-animate-in 750ms 1 ease-out;
    /* Safari 4+ */
    /* Fx 5+ */
    /* Opera 12+ */
    animation: alternate-logo-animate-in 750ms 1 ease-out;
    /* IE 10+, Fx 29+ */
}

/* Animate main logo */
@-webkit-keyframes main-logo-animate-in {
    0% {
        opacity: 0;
        margin-top: -400px;
    }

    100% {
        opacity: 1;
    }
}

.sc-main-logo {
    -webkit-animation: main-logo-animate-in 750ms 1 ease-out;
    /* Safari 4+ */
    /* Fx 5+ */
    /* Opera 12+ */
    animation: main-logo-animate-in 750ms 1 ease-out;
    /* IE 10+, Fx 29+ */
}

From here you can tweak the CSS to accommodate your design. If this has helped you, or if you have questions, improvements, or suggestions to this please let me know in the comments below!