Archived topic
Sticky container or block on desktop
3 replies · Started by Kristoffer on December 3, 2022
Hi,
I'm "rebuilding" a site (lotsia.se) and some pages will have a lot of content. Therefore I want a sticky "Tables of Content" on the right side on desktop,
I have seen several topics similar to this with some different solutions in regards to adding CSS on a container or blocks. I've tested the following solution on this page https://yidderi.se/test-kolumner:
.my-sticky-element {
position: sticky;
position: -webkit-sticky;
top: 50px; /* Offset from top of container */
}
I added the CSS on the block for Tables of Content and it works the way I like. Here I use standard columns.
But on https://lotsia.se/resekort/ I work with containers and grid. I have tried to add the same solutions but it doesn't work. I have also tried a couple of other suggested solutions that I've found in the forum but they don't work either.
Any suggestions?
Best regards
Hi there,
that layout won't work.
it will only work in a 2 Column Grid, where both columns are the same height.
If you have many columns that wrap to many rows than that column cannot be full height.
To keep that layout you could use some CSS to create a CSS grid:
@media(min-width: 1025px) {
.gb-grid-wrapper.aside-layout {
display: grid;
grid-template-columns: 75% 25%;
}
.gb-grid-wrapper.aside-layout .gb-grid-column {
grid-column: 1;
width: 100%;
}
.gb-grid-wrapper.aside-layout .gb-grid-column:nth-child(2) {
grid-column: 2;
}
.gb-grid-wrapper.aside-layout .gb-grid-column:nth-child(2) > .gb-container > .gb-inside-container {
height: 100%;
}
}This layout forces your 2nd column to be a full column of its own.
Now your sticky CSS should work.
Thanks David!
You're welcome
