Make Full Width Header Scroll Down Icon %22Bounce%22

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


  1. steven

    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?

    • dan

      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.

  2. Arben

    Thanks…work great

  3. Arthur


    On my site it isn't working.

    • dan

      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.

      • Arthur

        Hi Dan, sorry for my late reply. It was as you said 🙂 It works fine now!

        Thanks Dan

  4. MIke

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

    • dan

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

    • dan

      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.


Submit a Comment

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

The Divi Booster Plugin

Faster, easier Divi development

Learn more

The Ultimate Divi Bundle


This site is supported by affiliate links to products that I think may be of interest / use to you. I may receive a commission on sales of these products.

Now Divi 3.0 Visual Builder compatible