[Support request] sticky columns … when there are multiple rows/sections

[Ted]

The GP team has provided a TON of ways to make a column sticky, or a widget within a column sticky. Which is helpful.

But I’ve got a website homepage with two rows/sections (a top featured section, and a 2-column section below that with posts on the left and ads/etc. on the right). I’m trying to get that right column (or even a widget or two) to be sticky, but nothing I’m trying is working.

I see that this demo site — https://gpsites.co/info/ — has several 2-column sections/rows, and the right columns are sticky. Knowing how that’s done would solve my problem, I think.

Thanks!

[Leo]

Hi Ted,

I see that this demo site — https://gpsites.co/info/ — has several 2-column sections/rows, and the right columns are sticky. Knowing how that’s done would solve my problem, I think.

Info is using a 2 columns layout with a Grid block:
https://www.screencast.com/t/K1VJ3hRD

The sticky column has a custom class sticky-container added to the container inside the grid:
https://www.screencast.com/t/K1VJ3hRD

Then this CSS:

@media (min-width: 768px) {
    .sticky-container > .gb-inside-container,.sticky-container {
        position: sticky;
        top: 80px;
    }
}

Let me know if this helps 🙂

[DarkWolfCave]

Hi Leo,
I´m not the TS – but also have the same question.
And your solution works well for my side 🙂
Many thanks

regards

[Ted]

You got it to work, Peter? Would you be able to share the URL of the site where you got it to work? I’m still kind of struggling …

[DarkWolfCave]

Hello Ted,

yes of course I will share you my site. But for this “feature” I have only one Test-Site online – just for you 😉

Because all other sites there are with an different style. I’m changing the template for my articles completely, but it will take some time until it’s ready.

I hope this site can help you: https://darkwolfcave.de/test-new-template/

CSS-Part:
`@media (min-width: 768px) {
.sticky-container > .gb-inside-container,.sticky-container {
position: sticky;
top: 80px;
}
}`

Page:
Container ->
GRID ->
Container_left WIDTH 75%
Container_right WIDTH 25% (sticky -> advanced-css: “sticky-container”)

[Ted]

Ah, that’s really nice! Great job, Peter. Hopefully I’ll be able to get my site to work this way. Thanks for sharing!

[Ted]

Hm. My right column is VERY tall — probably the height of 3 browser scrolls. I bet that’s why it’s not working for me.

[DarkWolfCave]

Thanks Ted

I also think that this is the reason why it does not work for you. If the sticky block is too long, then the block scrolls, but you don’t see the whole content.

Just put in less 😛

[David]

Hi Ted,

For position Sticky to work, the parent row container has to have a set Height.
Which should be defined by the tallest column inside that container.
Which then allows the shorter column to flow vertically inside that same parent row.

However, your site is using CSS Floats to make the row / column layout:

.homepage-left {
    width: calc(100% - 300px) !important;
    float: left;
}

.homepage-right {
    width: 300px !important;
    float:right
}

When you float an element, it no longer occupies any logical space in its parent row and its height collapses to 0:

To fix this i would suggest the following to create your layout using GenerateBlocks 1.7.
Heres an example, add a new draft page, from the 3 dot menu in top bar, switch to code view:

Paste this code into the editor:

<!-- wp:generateblocks/container {"uniqueId":"67a0a64a","isDynamic":true,"blockVersion":3,"display":"flex","displayTablet":"block"} -->
<!-- wp:generateblocks/container {"uniqueId":"b0987aa5","isDynamic":true,"blockVersion":3,"flexGrow":1,"flexShrink":1,"borderSizeTop":"1","borderSizeRight":"1","borderSizeBottom":"1","borderSizeLeft":"1"} -->
<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat in fermentum posuere urna nec. Malesuada bibendum arcu vitae elementum. Donec enim diam vulputate ut pharetra sit amet. Pellentesque dignissim enim sit amet venenatis urna. Montes nascetur ridiculus mus mauris vitae. Leo urna molestie at elementum eu facilisis sed odio. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Urna neque viverra justo nec ultrices dui sapien eget. Etiam erat velit scelerisque in dictum non consectetur a erat. Augue ut lectus arcu bibendum at varius vel pharetra. Sit amet facilisis magna etiam tempor orci eu lobortis. Id eu nisl nunc mi ipsum faucibus. Molestie nunc non blandit massa enim nec. Integer vitae justo eget magna fermentum iaculis eu. Pellentesque habitant morbi tristique senectus et. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Tincidunt praesent semper feugiat nibh. Mattis nunc sed blandit libero.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Nunc lobortis mattis aliquam faucibus purus in. Vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Adipiscing tristique risus nec feugiat in. Dictum non consectetur a erat nam at lectus urna. Faucibus turpis in eu mi bibendum neque egestas. Faucibus scelerisque eleifend donec pretium vulputate. Fusce id velit ut tortor pretium viverra suspendisse potenti nullam. Quisque egestas diam in arcu cursus. Id ornare arcu odio ut sem nulla pharetra diam. Ut lectus arcu bibendum at varius vel pharetra vel.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Quis imperdiet massa tincidunt nunc. Risus commodo viverra maecenas accumsan. Justo donec enim diam vulputate ut. Aenean pharetra magna ac placerat vestibulum. Duis ultricies lacus sed turpis. Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Tempor commodo ullamcorper a lacus vestibulum. Quisque id diam vel quam elementum pulvinar etiam non. Ornare quam viverra orci sagittis eu. Ultrices eros in cursus turpis massa tincidunt. Id interdum velit laoreet id donec. Id ornare arcu odio ut sem nulla. Augue neque gravida in fermentum. Morbi quis commodo odio aenean. Non consectetur a erat nam at lectus. Auctor augue mauris augue neque.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Pharetra diam sit amet nisl. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. Enim lobortis scelerisque fermentum dui faucibus. Posuere lorem ipsum dolor sit amet. Sed enim ut sem viverra aliquet. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui. Viverra mauris in aliquam sem fringilla ut. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis. Ornare massa eget egestas purus. Ac felis donec et odio pellentesque diam volutpat commodo sed. Ut porttitor leo a diam sollicitudin.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Id semper risus in hendrerit gravida. At ultrices mi tempus imperdiet nulla malesuada pellentesque. Nulla at volutpat diam ut venenatis. Lobortis elementum nibh tellus molestie nunc non blandit massa enim. Hendrerit dolor magna eget est lorem ipsum dolor. Ultrices eros in cursus turpis massa tincidunt dui. Faucibus scelerisque eleifend donec pretium vulputate. Malesuada nunc vel risus commodo. Gravida cum sociis natoque penatibus et magnis dis parturient montes. Leo vel orci porta non pulvinar. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit amet. Tincidunt ornare massa eget egestas. Velit laoreet id donec ultrices tincidunt. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. In ornare quam viverra orci sagittis eu volutpat odio. Sapien et ligula ullamcorper malesuada proin libero. Laoreet suspendisse interdum consectetur libero id.</p>
<!-- /wp:paragraph -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"7d7ec818","isDynamic":true,"blockVersion":3,"flexGrow":0,"flexShrink":0,"flexBasis":"300px","sizing":{"minHeight":""}} -->
<!-- wp:generateblocks/container {"uniqueId":"3ec8842e","isDynamic":true,"blockVersion":3,"paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","paddingSyncUnits":true,"className":"is-sticky"} -->
<!-- wp:paragraph -->
<p>I am a sticky container.<br>I have an advanced CSS Class of:<br><code>is-sticky</code> </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>and here is my CSS:</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<style>
.is-sticky {
    position: sticky;
    top: 0;
}
</style>
<!-- /wp:html -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

Switch back to the Visual editor.

[Author]

Posts