[BLOCS 3] - Hero Arrow Down

Not sure if this is a bug, but I thought with a hero being Fullscreen, it would display the arrow at the bottom of the screen most of the time to scroll down (theoretically speaking depending of screen size etc).

When my site is viewed on a 5K iMac, I have to scroll down ever so slightly and then the arrow to scroll to the next bloc appears, glitching/flashing the text in the bloc as the arrow appears at the bottom of the screen.

Wondered if anyone else has noticed this?

Is this a migrated project or a fresh Blocs 3 one?

I’ve not seen this, but a test URL would be handy to see what’s going on.

This is from a freshly started project on V3

Try this: REMOVED

After you click Learn More, it scrolls down and the hero down arrow is not there, when you scroll down slowly, it flashes the text and the hero down arrow appears, just wondered if it was normal behaviour.

What version of B3 is this exported with?

Btw in future bugs reported this way works better for us. I only saw this by chance.

https://help.blocsapp.com/knowledge-base/reporting-bugs/

1 Like

Latest. 3.03 Norm. Thanks

1 Like

I don’t get this in Chrome or Safari, on an 5k iMac.

This is what I see, no scrolling required:

Click the down arrow or Learn More to the next bloc, does the arrow show for you?

Looks like each “page” is longer than 100vh and the arrow gets pushed down off screen so it appears on the first page but after that the arrows are not visible.

But each page is set to Fullscreen, I’m pretty sure I don’t have anything in the way of padding/margins to make the page is not stretched if thats possible…

Sticky nav is effecting this, because you have sticky nav enabled, Blocs is not overlapping your content underneath and is offsetting the scroll so the sticky nav fits on screen as well as the top part of your fill screen Bloc.

1 Like

I think the issue is that the height of the hero in your case needs to be 100vh minus the height of the Nav Bar. I tried height: calc(100vh - 56px); to replace min-height:100vh; and as a quick check it worked except the first true hero page has no nav bar so needs 100vh.

2 Likes

Yeah its going to require a little customisation, an easier solution may be to add a negative top margin to the scroll arrows below the fold of -56px;

Awesome, disabled the sticky nav and it works perfect now, will have a play around with that. Thanks guys @Norm and @webdeersign

1 Like

Now solved. For anyone who may come across this, I made a custom class for the scroll arrows and assigned it a 56px bottom margin to lift it up onto the screen, adding a top margin didn’t seem to work as it looked like it pulled the text down towards the arrow instead. Thanks again!

1 Like