Make Full Width Header Scroll Down Icon "Bounce"

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

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.

18 Comments

  1. 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
  2. So simple, so awesome, thank you

    Reply
    • You're welcome, Wes 🙂

      Reply
  3. 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
  4. 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
  5. Thanks…work great

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

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

The Divi Booster Plugin

Faster, easier Divi development

Learn more

Disclosure

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

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

18 Comments

  1. 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
  2. So simple, so awesome, thank you

    Reply
    • You're welcome, Wes 🙂

      Reply
  3. 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
  4. 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
  5. Thanks…work great

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

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