Scroll Down Indicator

[Legotan]

Hey There,

is is possible to realize a Scroll-Down Indicator via Header-Builder?

I mean something like this: https://www.halde.com/

Greetings,

Alex

[christian]

Hey Alex,

Yes, that is possible with the Header Builder. The trick is, you setup 2 bars. The first bar or the top bar contains the button and the second bar the bar the button will scroll to. You set the second bar’s height to 0px. Please watch this recording to clearly understand what I mean.

Hope that helps.

[Legotan]

Hey,

I get the idea of this, but in my particular case i dont know how to get this indicator positioned… My Website is https://hirschen.re-host.eu/
My Credentials are in a secure note… can you help me?

Greetings,

Alex

[rad]

Hi there,

Sorry, I’m a bit confused about the indicator. All I noticed here https://www.halde.com/ is just a header floating as you scroll and there is no indicator. Would you mind clarifying which feature you’re referring? Is it the active statuses of each menu item?

Thanks!

[Legotan]

Hey,
I mean the Animated arrow which indicates that you can scroll down .

[rad]

Hi there,

Ah, adding an arrow is easy, but the scroll functionality is different. have you tried using RevSlider above masthead instead? Like from here https://theme.co/apex/forum/t/displaying-revolution-slider-under-header-instead-of-on-top/17013

Or follow this https://www.themepunch.com/faq/scroll-below-button/

Thanks!

[Legotan]

But my Problem is how can i Center that arrow?

[paul.r]

Hi,

There is a setting for positioning the arrow.

See scerenshot

[Legotan]

So no possibility doing this with Header Boulder?

[rad]

Hi there,

There is, but it also requires customization with javascript. Scrolling functionality is only possible with javascript and header builder doesn’t have that.

You may wish to consult it with a developer for proper implementation.

Thanks!

[Legotan]

Ok, i just wann a Button there, No Need to scroll ro move. Just want to know the visitor that he can scroll down own his own

[rad]

Hi there,

I see, have you tried Christian suggestion? That should include the positioning (in his video), the arrow down icon is placed in the center.

Plus, you may set the arrow bar’s positioning to absolute, then set its height to zero and offset to negative.

Thanks!

[Legotan]

ok, i found a solution. With following css and assigning the button the class “bounce”

.bounce {


 animation: bounce 2s infinite;
 -webkit-animation: bounce 2s infinite;
 -moz-animation: bounce 2s infinite;
 -o-animation: bounce 2s infinite;
}
 
@-webkit-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
 40% {-webkit-transform: translateY(-30px);}
 60% {-webkit-transform: translateY(-15px);}
}
 
@-moz-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
 40% {-moz-transform: translateY(-30px);}
 60% {-moz-transform: translateY(-15px);}
}
 
@-o-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
 40% {-o-transform: translateY(-30px);}
 60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
 40% {transform: translateY(-30px);}
 60% {transform: translateY(-15px);}
}

[rad]

Ah, glad it’s okay now. And thanks for sharing!