Make Full Width Header Scroll Down Icon "Bounce"

Make Full Width Header Scroll Down Icon "Bounce"

(like this)

The Divi Builder's full width header module comes with an option to have a scroll down button, which indicates to the user that there is more content to follow. To draw further attention to this, you can make it "bounce" with the following CSS:

.et_pb_fullwidth_header .et-pb-icon.scroll-down {
	animation: fullwidth-header-bounce 2.2s ease-out infinite;
}
@keyframes fullwidth-header-bounce {
  0% { transform:translateY(0%); }
  12.5% { transform:translateY(20%); }
  25% { transform:translateY(0%); }
  37.5% { transform:translateY(20%); }
  50% { transform:translateY(0%); }
}

This is option is available in Divi Booster (under "Modules > Header (Full Width)") as of Divi Booster 2.0.5.

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

24 Comments

  1. Thank You!

    Reply
  2. Worked perfectly

    Reply
    • Hey Sebastian, did you manage to solve this? I just took a look and can see it working. If you're still having problems, perhaps first try clearing your browser cache. If that doesn't help, let me know what browser / OS you're using and I'll see if I can figure out what's going on. Thanks!

      Reply
  3. I was making the same mistake as Arthur (mentioned in comments above) and placing the CSS code in the module's CSS tab. Once I added it to the Custom CSS box for the page, it worked fine and looks great. I'd post a link but the site is still on a dev platform. Thanks for the great tutorial!

    Reply
    • Glad you got it working, Bill :)

      Reply
  4. Is there a way to force the bounce animation on load? It seems to only trigger on hover and then it loops infinate. Thx.

    Reply
    • Hi Esteban, the bounce animation should be start as soon as the page loads, as the CSS targets the main scroll down icon (rather than its hover state). Certainly this is what I see on my test sites. If you're still only seeing it activate on hover, is there any chance you're able to share a link to the page you're working on so that I can take a look? Thanks!

      Reply
  5. So simple, so awesome, thank you

    Reply
    • You're welcome, Wes :)

      Reply
  6. My header scroll botton takes me to top of page abd does not scroll down to main content?

    Reply
    • Hey Barry, did you manage to solve this? I took a look at the site linked in your comment and it seems to be working now.

      I can see that the first section in the page has an ID of "#topofpage" and the second section has and ID of "topofpage". I'm seeing the button scroll to the second section as I'd expect, since the "#" in the button link isn't actually part of the ID targeted by the link.

      If you're still having problems with it, are you able to let me know which browser you're using? Thanks!

      Reply
      • Hi Dan,
        Yes all sorted and works fine now! :-)
        Hope you are keeping well!

        Reply
        • Great! I'm well, Barry. I hope you are too :)

          Reply
  7. I just purchased the divi booster. Is there an option in the menu to enable the bounce or it has to be added via the css provided?

    Reply
    • Hi steven, yeah there's an option in Divi Booster, found at "Modules > Header (Full Width) > Make scroll down icon bounce". So there's no need to use the CSS above as that Divi Booster option adds it for you.

      Reply
  8. Thanks…work great

    Reply
  9. Hi,

    On my site it isn't working.

    Reply
    • Hi Arthur, I think the problem is that you're adding the code in the wrong place. It looks like you've added it via the module's Custom CSS tab, right? The problem with doing that Divi can't handle full CSS code there, only CSS properties / values. It would be better to add this code in the Custom CSS box for the page (found via the hamburger menu at the top right of the Divi Builder), or via the site-wide Custom CSS box at "Divi > Theme Options > General > Custom CSS". Hope that helps.

      Reply
      • Hi Dan, sorry for my late reply. It was as you said :-) It works fine now!

        Thanks Dan

        Reply
  10. It'd be nice to see this in action. Is that at all possible? Even if it's just a video of the feature.

    Reply
    • Hey Mike, as requested, I've added a fullwidth header module to the top of the post, demonstrating the bouncing icon :)

      Reply
    • Hey Trent, I just checked and it seems to work with Extra (which I see you're using on your site). If you're having problems getting it to work, send me a link to the page with the full-width header and I'll try to see if I can spot the problem.

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.