How to Change Your Sticky Logo on Scroll with Divi

Last Updated on September 22, 2022 by 15 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


  1. Failed to load your existing items. Please try again later.

  2. 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.


  3. 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!

    • How to link the logo to the homepage in the sticky menu (adjust width as needed).
      Menu Settings > Advanced > Custom CSS > Free-Form CSS:

      .et_pb_sticky selector .et_pb_menu__logo img {
      content: url(“your image URL goes here”);
      width: 50%;

    • I got this response from support after submitting a ticket, and it worked perfectly: To link to your home page, go to Menu Settings > Advanced > Custom CSS > Free-Form CSS and add the code below. Adjust the width of the logo on scroll according to your needs.
      .et_pb_sticky selector .et_pb_menu__logo img {
      content: url(“your image url goes here”);
      width: 50%;

    • 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.

    • 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 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…)

  4. 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.

  5. 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 🙂

  6. Can we do this using a SVG Logo?

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

👋 It's The Divi
Cyber Monday Sale!
Get The Deal
Before It's Gone!
Join To Download Today