Site logo

Archived topic

Sticky Sidebar Element (for ads)

3 replies · Started by James on November 2, 2022

Viewing posts 1–4 of 4

Hey there,

My sidebar comprises two elements - the first element is a hook (generate_before_right_sidebar_content) and then there is a second element which is a Block (right-sidebar). I would like to make the second element (the right-sidebar) block sticky, but not the first. So you scroll past the first then the second stickys.

I have been successful stickying the entire sidebar using the following:

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

BUT this stickies the hook as well.

I have also been successful just stickying a section if I use the sidebar widget, e.g.:

aside#block-7{
    position: sticky;
    top: 80px;
}

BUT this means I can't have multiple sidebar designs for different sections of my site.

Is there an easy way to target the specific element? I have tried but no luck yet. Thanks in advance!

Hi there

if you want to stick the last widget in the sidebar then you can do this:


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

Thanks David, that worked!

Glad to hear that

This archived topic is closed to new replies.