[Resolved] How To make a sticky sidebar?

[NeedForGaming]

I want to make a sticky sidebar both for home and single post. I used the below CSS code it didn’t work for me.

@media (min-width: 769px) {
.inside-left-sidebar {
position: sticky;
top: 100px;
}
}

[Ying]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[NeedForGaming]

This is not my answer, please tell me how to do that.

[Ying]

If that CSS doesn’t work, I have to see the live site code to adjust the CSS.

I can’t write CSS with imagination unfortunately.

You can put your site link in to the area where the red arrow is pointing to:
https://www.screencast.com/t/ns5qMczbx

[NeedForGaming]

Ok

[NeedForGaming]

Alright!

[Ying]

1. the sidebar on your home page is right sidebar, not left sidebar, so the CSS would be:

@media (min-width: 769px) {
    .inside-right-sidebar {
        position: sticky;
        top: 100px;
    }
}

2. You have this CSS, if the right sidebar’s ancestor element has overflowset to hidden, stickyCSS won’t work. You’ll need to remove this CSS:

html, body {
    overflow-x: hidden;
}

Let me know if you need further assistance 🙂

[NeedForGaming]

Thanks, it works.

[Ying]

You are welcome 🙂

[Author]

Posts