Sticky Blocks Elements (Sidebar)

Hi there,

you have used a Grid Block to add those two sidebar blocks, instead of that, could you may each of them a single Container Block that sits inside the parent container ? The Grid block doesn't look to be required and it will make it real hard to make that second block sticky.

Hey David,

Thanks for your advice. I have already changed the sidebar and made it using the parent container. Could you please tell me how Can Make the sidebar sticky??

Hi Shakil,

Try this CSS to make the sidebar sticky.

.inside-right-sidebar {
    position: sticky;
    top: 20px;
}

Hey Ying,

Thanks for the CSS. The CSS works for me, But how can I make a specific sidebar sticky, among others.

Hi Shakil,

If you’re wanting to make the last widget in your sidebar sticky, you can alter the code into something like this:

.inside-right-sidebar {
    height:100%;
}

.inside-right-sidebar > *:last-child {
    position:sticky;
    top:10px;
}

So, if you make a new Container Block under the Parent Container Block you already have which contains a Grid Block, the new Container Block will be the one that’s sticky.

Right now, everything is sticky as you have everything in one Container Block under the right sidebar.

Hope this helps!