Use Different Logo on a Fixed Header in Divi Theme [Fixed Firefox issue]

Make two versions of your logo that are both 200×131 and add them to your WordPress Media library. One logo will be used for the main header and one will be used for your fixed header.

Insert CSS Snippet to Switch Logo on Fixed Header

One of the simplest ways to switch your logo image with another on the fixed header is to use the CSS property “content”. If you are familiar with CSS, this is normally what is used when adding content to a :before or :after pseudo-element. In this case, we are going to use it to insert new content (your logo image) to replace the current logo image.

To do this, go to Theme Customizer > Additional CSS and insert the following CSS.

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL);
}

Now replace the text that says “INSERT NEW LOGO IMAGE” with your actual logo image.

To get the URL, go to your media library from the WordPress Dashboard and click on the image you want to add. You can find the URL in the top right of the screen that pops up.

Insert Javascript to Switch Logo on Fixed Header (Fixed Firefox Issue)

But this CSS solution has some problems. Note that content only works with ::before or ::after pseudo-elements and may not work with all element types. It’s working fine in Chrome and Safari but not Firefox. A better cross-browser solution would be to add the following jQuery to your Divi Theme Options > Integration > under the “add code to the head of your blog”

<script>
var imageUrl = [
'ENTER DESKTOP LOGO IMAGE URL',
'ENTER FIXED HEADER LOGO IMAGE URL',
];
jQuery(window).on('scroll', function() {
var $header = jQuery('header');
var $logo = jQuery('#logo');
if ($header.hasClass('et-fixed-header')) {
return $logo.attr('src', imageUrl[1]);
};
return $logo.attr('src', imageUrl[0])
});
</script>

Then just replace the text “ENTER DESKTOP LOGO IMAGE URL” and “ENTER FIXED HEADER LOGO IMAGE URL” with your actual image URLs.

That’s it.

Will get more info here: Switching Your Logo on a Fixed Header in Divi