How to Change the Divi Logo on Scroll
In this tutorial, I’ll show you How to Change the Divi Logo on Scroll so when you have fixed navigation enabled, a different logo appears in the menu when you scroll down in Divi.
You can change the Divi logo on scroll in these simple steps:
- In the Divi Theme Options panel, add your logo primary logo
- In the Divi Theme Options panel, enable “Fixed Navigation Bar”
- In the Theme Customizer, set your primary and fixed menu styles
- Add your fixed menu logo to your Media library
- Add the CSS Code Snippet below to your Custom CSS section in the Theme Customizer
- Copy the fixed logo URL and paste it in the “content” part of the code given below
Here’s the final look:

Changing Logo on Scroll in Divi
Here’s the CSS Code:
.et-fixed-header #logo { content: url(FIXED_LOGO_URL_HERE); }
Be sure to add this snippet of CSS to your Custom CSS area or Child Theme Stylesheet. In short and as explained in the tutorial, when you enable the fixed navigation in Divi, when you scroll, the logo sits inside the class of .et-fixed-header, so what we’re doing is just replacing the “content” that’s in that class to replace the logo when you scroll down.
This trick is super beneficial when you’re using a menu that changes color upon scroll and it conflicts with the color of the menu or like this tutorial shows, when you have a transparent menu at the start but a colored menu when you scroll down. Often logo color designs will conflict in either case depending on the brand of the company.
Remember you don’t have to have the exact same logo or even size of file either, though I’d recommend keeping it the same. You can put whatever logo you want as the fixed logo so this trick is only limited by your imagination!
Interested in Divi?
Get a special discount when you use my affiliate link!
Links Mentioned:
Recommended Courses:
- Divi/WordPress Beginners Course
Use code “diviwp22” at checkout to get the course for only $75! - Divi/CSS Course
Use code “css30” for $30 OFF the course! - Website Design Course
Similar Articles:
I love this! Works so well with the standard Divi header!
Hey any tips on how to make this compatible with Firefox and IE?
Josh, great solution but it is not working on Firefox. Do you have a solution? Thanks a lot and stay safe.
Same Here Josh. Firefox wont respect the CSS. Thanks!
Yeah don’t know of an alternative unfortunately.