- This topic has 5 replies, 3 voices, and was last updated 3 years, 9 months ago by
.
-
Posts
-
Hello,
I would like to ask if would be possible to create an overlapping effect like in this recording, using GB containers.
I’ve started a page with three vertical containers (link in the private area), but I’m stuck here.
May I have your help, please?
Thank you!
Customer Support
Hi Marcel,
Can you link us to the example site?
Hi Yang,
Sure. It’s
https://www.vicodo.com, but it’s not wordpress.Customer Support
Hi Marcel,
Yes, it’s possible and you would need custom CSS.
First, add
my-gridto the CSS classes of the Grid Block as such: https://share.getcloudapp.com/2Num5lmQThen, add this custom CSS in Appearance > Customize > Additional CSS:
.gb-grid-wrapper.my-grid > .gb-grid-column:first-of-type > .gb-container > .gb-inside-container { position:relative; } .gb-grid-wrapper.my-grid > .gb-grid-column:first-of-type > .gb-container > .gb-inside-container > .gb-container { position:sticky; top: 10px; left: 0; } .gb-grid-wrapper.my-grid > .gb-grid-column:last-of-type > .gb-container { position:relative; } .gb-grid-wrapper.my-grid > .gb-grid-column:last-of-type > .gb-container > .gb-inside-container { position:sticky; top: 10px; left: 0; }Result: https://share.getcloudapp.com/qGuOKJxm
In essence, to achieve the desired effect, we made the needed Containers Sticky.
Hope this helps!
Working :). Thank you a lot, Fernando!
You’re welcome Marcel!
- You must be logged in to reply to this topic.
