Scroll button

[stephenvosloo]

Hi there,

I have a button/icon that I’m trying to place at the bottom of an image that currently fills my home page header bar. (100% vw) You typically see that where a big splash image is used and then there is a small icon at the base of the view port inviting the user to scroll down for more content.

I’m able to place the icon/button but I’m having trouble positioning it at the bottom of the image, so that when the window resizes it remains at the base of the image.

Currently it sits in the center. (please see attached screen grab). Also the circle around the down arrow seems to oblong and not a perfect circle – what am I missing?

One more question, sorry — if I were to add another container in bar2 how do I set it below container 1, or would I instead add a bar below?

thank you!

[stephenvosloo]

I think I may have figured it out. Any chance you can take a look to let me know if I executed this the right way?

[paul.r]

Hi,

Thanks for writing in!

I have checked and yes you have done it the right way.

Have a nice day!

[stephenvosloo]

thanks so much Paul! Any thoughts on how to get that circle to be more symmetric, or am I seeing things?
One more question — is there a way to prevent it from bumping into the title and button above it when I resize the window to be super small? At the moment when I drag the window to where it’s almost closed the scroll down button keeps on going up under the title and even into the menu area. Is there a way to limit it from doing that?

thanks so much again!

[Prasant]

Hello @stephenvosloo,

Thanks for updating the thread.

I have cleared SG Optimizer cache and the changes should get reflected on your end for button. I tried resizing the browser and don’t see any issues with the button. Please see screencast. https://cl.ly/2C321a0e063G

Please check at your end and let us know how it goes. In case I am missing something, kindly let us know.

Thanks.

[stephenvosloo]

Thanks Prasant, this was more of a learning question I suppose. I don’t think this will practically ever happen but if you reduce the vertical height of the window drastically eventually “scroll down” button will cross over the headline. I was wondering if there’s some kind of padding to add to avoid that from ever happening.

The circle border still appears to be oblong and not symmetric.

Also — what is best practice for having that headline and button centered in the viewport at all time.

thanks a lot!

[paul.r]

Hi,

1. To make it a circle, you can add this in Header > CSS

.e138-19.x-anchor {
   width:44px;
}

2. You can add multiple gap elements with different visibility on top and bottom of your headline.

That way you can have big gaps on desktop and small gaps on mobile.

[stephenvosloo]

@paul.r

.e138-19.x-anchor {
width:44px;
}

thank you, for some reason that didn’t seem to work but I think I managed to figure it out, cheers

[Prasant]

Glad to hear that.