Last active
June 4, 2018 10:54
-
-
Save Garconis/288bb23aac8ea898f5d9b26b0f935f10 to your computer and use it in GitHub Desktop.
Divi | Swap/change the Divi header logo on fixed header (After Scroll)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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 ); |
but if we use javascript, the problem is "during loading of the site the logo will be of divi"...
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
NOTE: The above CSS method does NOT work in IE, Edge, or Firefox. For this reason, it may be best to instead use the jQuery method in this Gist.
The jQuery 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. Note 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... or wherever you would rather add your Javascript.