Sticky sidebar

Hi there,

if you want the entire sidebar to be sticky then add this CSS:

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

Make sure to clear the SG Optimizer cache if it doesn't work first time.

Hi David

Thanks for the reply.

Sorry, I wasn't clear. I would like to have the last widget as sticky.

Regardless, I've added the code you provided but can't get it to work for me.
(Have cleared SG Optimizer cache and flushed cache in SG)

Hi Scott,

Can you try adding David's code to the top of the CSS field?

Hi Ying

That worked thanks - why would that be the case?

Also, how can I switch this so only the last widget is sticky? (not the table of contents)

Hi Scott,

With regards to the code not working previously, it may be a syntax error usually an extra or missing }. This will cause other code not to work.

Now, with regards to the last widget being sticky if that’s the case, can you try this CSS instead?:

@media(min-width: 769px) {
    .inside-right-sidebar, .inside-left-sidebar {
        height:100%;
    }

    .inside-right-sidebar .widget:last-of-type, .inside-left-sidebar .widget:last-of-type {
        position: sticky;
        top: 60px;
    }
}

I replaced :last-child with :last-of-type which is the more appropriate pseudo-class.

Kindly let us know how it goes.

That works, thanks!

You’re welcome Scott!