-
Hello,
I’m strugling to find the way to make a grid column sticky.
You’ll find a link on private information where you’ll see a grid with 2 columns, where I want the right side column (Contact) to be sticky.
I’ve tried to set the column container position to sticky but it does not work.
I’ve also tried the old Dave solution giving the column container the
.is-sticky-columnwith CSS `.is-sticky-column {
position: sticky !important;
top: 50px !important;
}`But it does not work either.
Tried to find a solution on documentation but nothing.
Tried to find in the forum and nothing’s working.
Hope you’ll be able to help.
Thanks!
-
Hi there,
With the current layout structure, the column can’t be made sticky because its parent container isn’t taller than the sticky element. For CSS
position: stickyto work, the containing block must have a greater height than the sticky element itself.To fix this, you’ll need to move the sticky column outside of the grid container and ensure it isn’t nested within another container that restricts its height.
-
Ok, so I just need to add a new container inside my grid item and add to this new container the position:sticky. Thanks!
-
Hello again,
I’ve made two containers sticky, one horizontal and one vertical as you may see in the link in private information.
Is it possible to make the horizontal container to stop before the vertical one to avoid the mess at the end of the page?
Also, on mobile is it possible to make a sticky “Contact” bar at the bottom of the page?
-
Is it possible to make the horizontal container to stop before the vertical one to avoid the mess at the end of the page?
I don’t think it’s possible without a custom JavaScript solution.
Also, on mobile is it possible to make a sticky “Contact” bar at the bottom of the page?
Yes, you can create it via a block element – hook (
before_footer), and set the container toposition:fixed; botom:0; left:0; right:0;. -
I don’t think it’s possible without a custom JavaScript solution.
Ok, thanks
Yes, you can create it via a block element – hook (before_footer), and set the container toposition:fixed; botom:0; left:0; right:0;.
This is not what I want to achieve. If you can check the page in private information on mobile view, you’ll see that when scrolling a container become fixed, but I would like this container to display on the bottom.
Is that possible?
-
Do you mean the Contactez agence locale section? If so, you will need JS for that as well.
- You must be logged in to reply to this topic.