Read a lot of posts that are similar, but not quite what I am trying to do. I’m building a store and am using a two column layout. I want the left column with the search and categories to be sticky so they stay on the left even when scrolling down. Not matter what I try it doesn’t work. Have added a class and made the position sticky. Tried other suggestions here in the forum, but they all seem to be for sticky navigation. I just want the sidebar column to stick on the shop page. Any help appreciated.
Hi,
Sticky breaks when overflow is used in a parent. So to solve in this in blocs you need to set overflow:unset on the .page-container like this… (as I have mentioned a few times now the forum before)
When it comes to adding the CSS, there are 2 methods.
-
Use the Bootstrap helper class .sticky-top
-
Use a custom class like you are doing, set position: sticky, and then the top edge 0px, or how every much you want the offset from the top to be… eg. (without the edge set it doesnt work)
The sticky style is applied to the content of the column, not the column itself.
2 Likes
Oh my gosh, bless you. I didn’t realize you had to have the edge defined for it to work. Thanks @PeteSharp !!!
1 Like