How to Change Your Sticky Logo on Scroll with Divi

Posted on October 6, 2020 by in Divi Resources 12 Comments

How to Change Your Sticky Logo on Scroll with Divi
Blog / Divi Resources / How to Change Your Sticky Logo on Scroll with Divi
Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time 👇

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

Divi Plugin Highlight: WP and Divi Icons Pro

Divi Plugin Highlight: WP and Divi Icons Pro

Posted on November 20, 2022 in Divi Resources

WP and Divi Icons Pro is a third-party plugin that adds over 3900 icons with 11 different styles to the Divi Builder. Icons include Font Awesome, Material Design, and custom icons. You can also upload your own and use them with all the others. In this post, we’ll take a close look at WP and Divi...

View Full Post
Divi Plugin Highlight: Divi Shop Builder

Divi Plugin Highlight: Divi Shop Builder

Posted on November 19, 2022 in Divi Resources

The Divi Shop Builder adds 14 new modules to the Divi Builder that allow you to customize the design of default WooCommerce pages with Divi. The plugin also comes with some premade shop layouts to give you a jump start on customizing your site. If you run an online store using WooCommerce and want...

View Full Post


  1. Can we do this using a SVG Logo?

  2. This was extremely helpful. Was using a script and CSS to do this.

    However, the transition between logos is instant and not smooth. Where do I change the settings to give it a .3s transition? Have tried a couple areas and can not seem to get it to transition smoother, like in your example above.

    • Hey Chris,
      I added this to the content change css:

      animation: fadeIn ease 2s;
      -webkit-animation: fadeIn ease 2s;
      -moz-animation: fadeIn ease 2s;
      -o-animation: fadeIn ease 2s;
      -ms-animation: fadeIn ease 2s;

      • That css code added to content only animates the logo, not the whole menu. No need to add that, if done correctly the menu should transition without additional CSS code.

        Chris I think something in your settings is probably off. Check all steps. I had this before too, when building the menu. I believe I added settings to the row/column instead of section. Make sure the steps “apply sticky settings” are carefully done to the proper fields. Hope that helps 🙂

  3. Hey, I’m loving the new sticky settings but this is another example of how they’re inconsistent. Rather than having to resort to using the custom CSS and sticky state, why not just have the logo of this module configurable with a sticky state. This also applies to the alignment settings within the menu module plus some others.

    I’m so pleased the sticky settings are here, but it’s frustrating that they’re not available on all settings within a module.

  4. Hi! Very helpful, I just want to know how to add a link (to home page) to that logo when scrolling. I couldn’t find that. Thanks!

    • I am researching for a few hours already and looking for the same. Is it possible to add a link to a CSS pseudo code? The logo should definitely stay clickable. I never found a good solution yet for the logo swap, especially as all tutorials and plugins work differently (some for older Divi versions, some for Divi default header, some for Divi Theme Builder, some maybe only on Deskop …who knows…)

    • I hope I’ll get a notification email if someone answers – if I figure something out I want to share it here – but I somehow doubt it’s possible with this solution approach.

    • I really appreciate this instruction, it works. I can see what you mean; if you follow it exactly, when you scroll down and click the CSS-inserted logo, it doesn’t send you to the link. But when I added the/ link for home on both the logo link url and the link url, it worked for me. Hope is helps.

  5. I would like a square icon in sticky state. So height and width are different between regular state and sticky state.

    I’m using the inline center logo menu (custom built in theme builder by Divi) for desktop. For tablet and mobile I use menu with logo on the left. When adding the logo, and setting logo max height and width to 50px for sticky state, the logo gets distorted.

    Next I added height and width to the content css, that kinda fixes the proportion, but strips the margins/padding around the logo, and also removes the smooth transition between regular state and sticky state.

    Any ideas how to get this working with different proportions between logo’s?

    Note: adding height and width in the content css does work for menu with logo on the left, which I am using on tablet and mobile.


Join To Download Today