(701) 732-0799

As you scroll down it is often nice to change the color of the menu bar. To keep a clean look sometimes you need to change the DIVI Logo colors as well. Currently DIVI doesn’t have a built in option to swap the logo image between the primary and fixed menu bar. I’m sure they will add the feature in a later release but for now please use the following code snippet.

Change the DIVI Logo colors - Switch The Logo - Light to Dark DIVI

Swap the DIVI Logo

Use the following code in your child theme or under “Custom CSS” found at the bottom of the Divi Theme Options (back-panel)

img#logo {
content: url(https://Your-Page-load-Logo.png);
}

.et-fixed-header #logo {
content: url(https://Your-Fixed-Header-Logo.png);
}

If you have any trouble feel free to shoot me a message this one isn’t too hard to fix.

*** Firefox and Edge do not support the code above.  ***

jQuery Version

The jQuery version should work with more browsers.
Divi Theme Options -> Integration -> Add code to the < head > of your blog  -> Save


The script tags freakout the plugin and WordPress so you’ll need to add them when you past the code.
Replace “Desktop logo url here” here and “Fixed logo url here” with your image links.

<script>
 var imageUrl = [
 'Desktop logo url here',
 'Fixed logo url here',
 ];
 
 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>

I actually didn’t see that Quiroz already tackled this problem. His solution is a little more robust.  If my method doesn’t work for you take a look at his post.

Update… Apparently Elegant Themes has posted a version as well.

About Dirt River Design LLC

Dirt River Design is a web design and development company that serves Grand Forks, Devils Lake, Grafton, Crookston and surrounding areas. We specialize in helping companies move their business and advertising online. If you have been thinking about getting a website or need an update please give us a call.

Contact