Developer forum

Forum » Feature requests » Make Facet "Panel" sticky

Make Facet "Panel" sticky

Justin Sjouw Dynamicweb Employee
Justin Sjouw
Reply

Hi,

I would like to request a feature that the Navigation/Facet panel can be made sticky, so that it stays visible when a user scrolls down.

Unfortunately since the element is a sibling and not a child of the header, using boorstrap sticky-top will stick it on top of the header (with the viewport as the top), whch is ofcourse not wanted.

Thanks!

Justin


Replies

 
Nicolai Pedersen Dynamicweb Employee
Nicolai Pedersen
Reply

Yes - CSS issue.

position sticky is set inside a container - in your case that would be the div tag that is the parent - it is using display:grid.

display:grid will default to align-items:stretch which will ensure that your 2 columns inside the grid will have the same height (The column with the facets and the column with the product list).

So if you change the grid container to have align-items:start instead, the 2 columns will no longer have same height and that will allow for your facets to stick to the top.

Then you also need to add info on where in the viewport you want it to stick using a top position in css - in this case it will be the height of the header with navigation that you set as the threshold by adding top:170px to your sticky column.

Like this:

 
Justin Sjouw Dynamicweb Employee
Justin Sjouw
Reply

Oh man I was so close, just couldn't figure out the  align-items:start :-)

Thanks for your swift reply!