You can swap what logo shows up in the header, on the Divi theme, by using the following CSS.
You will need to set your default logo in the normal theme options, and then add similar CSS as shown below. It will use CSS to swap the logo image’s URL if/when the header is fixed.
img#logo {
content: url(/wp-content/uploads/logo.png);
}
.et-fixed-header img#logo {
content: url(/wp-content/uploads/logo-alt.png);
}
Note: The above CSS method does NOT work in Internet Explorer, Microsoft Edge or Firefox. For this reason, it may be best to instead use a jQuery method:
(function($) {
$(window).on('scroll', function() {
if(jQuery('#main-header').hasClass("et-fixed-header")) {
jQuery('#logo').attr('src','/wp-content/uploads/logo-alt.png');
}
else {
jQuery('#logo').attr('src','/wp-content/uploads/logo.png');
}
});
})( jQuery );
The above method works by checking (on scroll) if the header is normal or fixed. If the header has Divi’s et-fixed-header class (which is what happens when the header is sticky/floating at the top of the viewport), then it will use the “alt” logo.
Otherwise, it will use the normal logo.
You will need to set the normal logo in both theme options and then again in the “else” area of the jQuery script. This is to ensure it switches back to the normal logo when the header is no longer fixed.
Ensure you add that jQuery script to the Header Footer (in the Footer area) Plugin, and wrap it in script tags.
){kind=link}