Archived topic

scroll down moving chevrons

3 replies · Started by daryl on October 6, 2018

Viewing posts 1–4 of 4

October 6, 2018 at 1:18 pm #695070

Hi,

I would like to add scroll down chevrons onto my site instead of the current mouse scroll down animated gif.

I've have a test on this page

I've place the chevron scroll in the left box in beaver builder..
but the words scroll down appear at the top... and the whole thing is not centred within it's box.

here's the original source which I'd like it to look like..

https://codemyui.com/dripping-down-arrow/?relatedposts_hit=1&relatedposts_origin=1238&relatedposts_position=0

at the moment, I've just used the html box in beaver buidler added the html and then added the css code to the custom css section, minus the body code... and made the container 0 as this was showing up as a white box.

but i know virtually nothing about coding.

any help to know how to centre this scroll down in it's bb box and get it to appear with the words scroll down underneath (the same as the example source) would be much appreciated.

kind regards
daryl

October 6, 2018 at 10:19 pm #695233

Hmm, not an easy one as I don't know how you'd center this inside BB.

Can you give the element a more specific class than container? That way I can play with it a bit more..

Where are the Scroll Down words coming from?

October 7, 2018 at 7:15 am #695392

HI TOM,

Thanks for your reply, I virtually know nothing of coding so am stumped, ... so have put an animated gif in there instead

https://aearyl.com/camden

the only two issues are the space in height between the 'chevrons animation gif' and the 'scroll down' text which is perfect on the desktop, but as soon its on mobile or iPad it becomes a little too big, i want it to maintain the smallish gap it has on desktops (same sort of ratio)?... is there any way to easily fix this?

the only other thing I want it to do is when the user clicks on either the chevrons or scroll text , i want the page to scroll down to the next bit of the page? ... i'm probably being really stupid, but i don't see a way to do this?

kind regards
Daryl

October 7, 2018 at 7:18 pm #695738

It looks like that BB module (with the arrows) has 20px of margin while on mobile. Can you check those settings?

To get it to link somewhere, add an anchor link to it: <a href="#anchor-link-example">Stuff to link</a>

Then that will link to the area of the page with that ID:

<div id="anchor-link-example">
    The link will scroll to me.
</div>

This archived topic is closed to new replies.

Start building better websites today.