Changing your site's logo when the page is scrolled can enhance your website's visual appeal and improve user experience. This dynamic effect can make your branding more engaging and help draw attention to different states of your website.
In this article, we will guide you through the process of changing your site's logo when the page is scrolled using Divi.
Change the Logo Image using the default Divi Header Navigation
Upload the two logo image files to your WordPress Media library
Take note of both file's URLs:
Go to WordPress Dashboard → Divi → Theme Options → General Tab
For the Logo option, paste the image URL that you want to show when the page loads
Ensure that the Fixed Navigation Bar option is enabled
Go to Divi → Theme Options → General Tab → Custom CSS and add this CSS Code:
.et-fixed-header #logo {
content: url(https://demo.divi.tech/wp-content/uploads/divi-logo-white.svg)
}
Important note: Make sure that you replace the https://demo.divi.tech/wp-content/uploads/divi-logo-white.svg URL with the URL of your image that you want to show when the Header area is in Fixed state.
The result can be seen in the screencast below:
Change the Logo Image using the Menu module
This process can be used if you use Theme Builder to create custom header layouts.
Open the Menu module settings by clicking on the Gear icon
Ensure that the Logo image is added to the Menu module's Content Tab → Logo
If the Menu module is set to be Stick at Top in Advanced Tab → Scroll Effects, add this CSS code to Advanced Tab → Custom CSS → Free Form CSS:
selector.et_pb_sticky--top .et_pb_menu__logo img {
content: url(https://demo.divi.tech/wp-content/uploads/divi-logo-white.svg)
}
If the Section that contains the Menu module is set to Sticky at Top in the Section's settings → Advanced Tab → Scroll Effects, add this CSS code to the Section's Advanced Tab → Custom CSS → Free Form CSS:
selector.et_pb_sticky--top .et_pb_menu__logo img {
content: url(https://demo.divi.tech/wp-content/uploads/divi-logo-white.svg)
}
Important note: Make sure that you replace the https://demo.divi.tech/wp-content/uploads/divi-logo-white.svg URL with the URL of your image that you want to show when the Header area is in Fixed state.
The result can be seen in the screencast below:
