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:

1. In the Divi Theme Options panel, add your logo primary logo
2. In the Divi Theme Options panel, enable “Fixed Navigation Bar”
3. In the Theme Customizer, set your primary and fixed menu styles
4. Add your fixed menu logo to your Media library
5. Add the CSS Code Snippet below to your Custom CSS section in the Theme Customizer
6. 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!

Purchase Divi HERE & Save 10%

Links Mentioned:

• Divi Child Theme Explained + FREE Child Theme Download
• Where to Put Your Custom CSS in Divi

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:

• Switching Logo on Scroll – Elegant Themes
• How to Change Logo on Scroll – WP Engine
• Divi Swap Plugin – DiviLife.com
• Change Divi Logo when Scrolling Down – Quiroz.co
• Change Logo on Scroll – Ferdy YouTube