Hi,
Is it possible to make a sticky column in SP-Pagebuilder?
I have a section with 2 columns. I want to make the left column sticky while the right column scrolls. Content in the right column is higher than in the left. But I want the left column to always remain visible while scrolling.
I have already tried everything, including "position:sticky, top:0px;" and with the bootstrap class "sticky-top". But nothing works.
Does anyone have a solution for this?
Oke, took me a day to fix this. In case this helps anyone else, here's how I did it:
Template: Helix Ultimate v2.1.1
Add in your custom.css file this:
.body-innerwrapper {
overflow-x: clip;
}In SP Pagebuilder, enter the following in CSS Class for the column you want to get sticky:
.position-sticky
Add in custom.css this:
.sppb-column.position-sticky {
top: 110px;
height: fit-content;
}Adjust the top according to your wishes. Of course this only works if the other column has more content than the sticky column, i.e. more height.
In the Bootstrap 4.0.0 and higher releases, this option is is done using the sticky-top class.
Edit:
In the Bootstrap 4.0.0 and higher releases, this option is is done using the "position-sticky" class.
Hello Martin,
That’s fantastic news that you’ve resolved the issues you raised—you’re a rock star!
Best regards,
