[Support request] Sticky container

[Wouter]

Hi,

I am trying to make a sticky container in a grid with two other containers.

So I want the container to stay when scrolled down.

I have tried to follow the options from the other threads, unfortunately without success.

Thanks in advance for the effort.

[David]

Hi there,

the Grid Block you used to create that layout, select that, and set its Vertical Alignment to default this will force the columns to be the same height, which we require to make the contents sticky.

If you need to adjust the vertical alignment then you can do it that in each of the columns Container Blocks.

Once you done that give the Grid Block an Advanced > Additional CSS Class of: has-sticky-column
And select the Container Block you want to be sticky and give a CSS Class of: is-sticky-column

Let me know once thats done and ill provide some CSS

[Wouter]

Hello,

Thanks for you reply.

I have followed your instructions!

[David]

Can you confirm the URL ? The one you provided earlier is returning a 404 error

[Wouter]

Hello David,

See below.

[David]

Add this CSS:

@media(min-width: 1024px) {
    .is-sticky-column .gb-inside-container {
        position: sticky;
        top: 0;
    }
}

[Wouter]

Works perfect! Thanks for your help and quick response.

[David]

You’re welcome

[Author]

Posts