Archived topic

Scroll down button fixed to bottom of a container

3 replies · Started by Greg on September 3, 2022

Viewing posts 1–4 of 4

September 3, 2022 at 1:20 pm #2332655

Hi all,

I'm trying to add a scroll down arrow button to the bottom of a full-page container (100vh). I've used the bits from Tom and David in this thread: https://generatepress.com/forums/topic/scroll-down-button-for-head-on-library-item/

But, I'm having problems getting it to align with the bottom of the container. I think this is due to my content in the container being vertically centered.

Any ideas on a workaround for this?

Many thanks,
Greg

September 4, 2022 at 4:29 am #2332942

Hi there,

yes thats correct, the vertical align center will affect that.
The options are:

A. Don't use the vertical align and use padding to add space where its required.

B. i) Select the Container Block, and give it a class of: relative-parent
ii) add this CSS to:

.relative-parent .gb-inside-container {
    position: static;
}

Then your hero-jump-link absolute position should be relative to the outer container.
the only issue - it may affect z-index.... let us know.

September 4, 2022 at 4:59 am #2332956

Hi David,

Option B works just as I hoped, thank-you!

No issue with z-index, yet.

Thanks,
Greg

September 4, 2022 at 7:02 am #2333027

Glad to hear that :)

This archived topic is closed to new replies.

Start building better websites today.