Making specific container sticky

Hi there,

It’s not possible based on your current HTML structure.

You need to change your structure to this, drag the wp-block-group into the parent container of the page, so it becomes a sibling to the alphabet container.
https://www.screencast.com/t/MAdLSsFdNxOD

Once it’s done we can take another look.

To clarify, do you want the entire Dictionary section sticky or just the alphabet buttons?

Try adding this through Appearance > Customize > Additional CSS:

.gb-container.gb-container-62a240a0 {
    position: sticky;
    top:60px;
}

.gb-container.gb-container-b429ea89 {
    position:relative;
}

.gb-container.gb-container-a3d597d7 {
    overflow-x:unset;
    overflow-y:unset;
}

Add a Background color to the Container Block holding the Alphabet so it appears better.

Can you reshare the exact page in question?

Would you want it sticky just on Desktop? I’m not seeing a “Books” button on mobile as well.

I see.

Give the Container Block a make-sticky class. Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

Then replace the CSS we had with this:

.gb-container.make-sticky {
    position: sticky;
    top:60px;
}

.gb-container.gb-container-b429ea89 {
    position:relative;
}

.gb-container.gb-container-a3d597d7 {
    overflow-x:unset;
    overflow-y:unset;
}

You’re welcome!