Is it possible to add a Sticky Filter Bar attached to a container?

Hi there,

We’re currently working on a site and we plan to export it to give to back end developers to make a filter system work, but we need to add a fixed filter bar to the side of the main content page.

I’ve done this by making the element fixed and moving it over to the content with percentages. However this causes the filter box to get cut off on any resolution lower then 1080p, is there any way to attach the item to the main container so it scrolls with the content but will dynamically move on smaller screens?

thanks in advance!

Jamie


Here is my public share link: https://preview.webflow.com/preview/deluxe-cruises?preview=5237b528d5dd093bb025e4f1b8aa3188
(how to access public share link)

In general the fixed by deafult is “responsive” (relative to the window boundary). But you added negative values.

In your code you “mixup” - using left: X; and than move this item again with negative margin-left: -Y; (the negative margin = “get cut off” effect).

left: 0px;
margin-left:0;
/* Now your box always stick to the left edge of the viewport */

Fixed: try this trick:

Look at this example (The right fixed menu)

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.