How to Change Your Sticky Logo on Scroll with Divi

Posted on October 6, 2020 by 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 Anniversary Sale

It's The Divi Anniversary Sale! Save Big For A Limited Time πŸ‘‡

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

Access The Sale
Divi Anniversary
Premade Layouts

Check Out These Related Posts

Divi Plugin Highlight: Divi MadMenu

Divi Plugin Highlight: Divi MadMenu

Posted on March 22, 2023 in Divi Resources

Divi MadMenu is a header and menu creation plugin that expands the possibilities of your Divi headers and menus. Divi MadMenu comes with a horizontal menu module and a vertical menu module. You can fully customize every aspect of your menu with extensive design options, allowing you to create...

View Full Post
Get a Free Wellness Layout Pack for Divi

Get a Free Wellness Layout Pack for Divi

Posted on March 20, 2023 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Wellness Layout Pack that’ll help you get your next Wellness website up...

View Full Post

12 Comments

  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.

    Thanks!
    Regards,
    Mirna

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

πŸ‘‹ It's The Divi
Anniversary Sale!
Get The Deal
Before It's Gone!
Join To Download Today