[Support request] CSS for Sticky Sidebar Element

[Kelsey]

Hello,

How can I make the bottom element on this sidebar element sticky?

https://thegoldenlamb.com/rankiq-keyword-niches/

You provided excellent CSS for regular posts with sidebar widgets but it doesn’t work for elements.

Thanks,

Kelsey

[David]

Hi there,

try adding this CSS;

@media(min-width: 769px) {
    .inside-right-sidebar *:last-child {
        position: -webkit-sticky;
        position: sticky;
        top: 20px;
    }
}

[Robert]

hm, that didn’t work for me.

[Robert]

link to my site: https://www.watercolorfanatic.com/how-to-mix-watercolors/

[David]

Hi Robert,

your site is still using the old floats grid, so you would need some CSS like this:

@media(min-width: 1024px) {
    .site-content {
        display: flex;
    }
    .inside-right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 20px;
    }
}

[Robert]

That seemed to work. What is the old floats grid? And should I be using something newer? It’s a new site with all the current versions. Thanks

[David]

This doc explains the old Floats grid and how to move into flex box:

https://docs.generatepress.com/article/switching-from-floats-to-flexbox/

If you make that change then the CSS I provided the OP should work for you

[Kelsey]

Thanks, David! Worked like a charm.

[David]

Glad to hear that

[Robert]

Switched to flex, works great! Thanks for the A+ support.

[David]

Glad to hear that too!

[Author]

Posts