How to Change Your Sticky Logo on Scroll with Divi

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

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Get a Free Conference Event Layout Pack For Divi

Get a Free Conference Event Layout Pack For Divi

Posted on May 27, 2024 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 Conference Event Layout Pack that’ll help you get your next conference...

View Full Post
Get a Free Writer Layout Pack For Divi

Get a Free Writer Layout Pack For Divi

Posted on May 20, 2024 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 Writer Layout Pack that’ll help you get your next Writer website up and...

View Full Post

19 Comments

  1. I know this is old but how can I make the background transparent? I’ve tried everything.

  2. Any idea how to get the sticky logo to link to the homepage? I’ve followed the suggestions of adding some CSS coding and it doesn’t seem to do anything.

  3. The sticky logo does not link to the home page like the non-sticky logo does.

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

  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

  6. 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…)

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

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

  9. Can we do this using a SVG Logo?

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today