Fixed in-line filters with Lists

[Sonu]

Hi,
I want to know if anyone has experience with creating a floating/fixed in-line filter in the list block so that when you scroll down a list, your in-line filter bar remains in the same place. In the screenshot, I want the section highlighted in orange to remain in one place.

i tried to add the following code (with class names replaced) and did not get the desired effect. Would appreciate any assistance.

.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 160px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
}

[matthieu_chateau]

Hi,
Will there be only the list in the page or will there be other blocks at the top or at the bottom? It changes a lot of things (and it’s complicated to perform this anyway)

[matthieu_chateau]

If first case, insert this in the header/custom code/page settings

It will be ugly but could be a good starting point for you.

Replace #list1 by your block ID/Name
A lot can be changed according to the set up of your page (full width, fixed witdth, margin top and bottom of the block, height of the side filters container etc…)

<style>
#list1 {
  position: relative;
  width: 100%;
  overflow: auto;
}

#list1 .side-filters {
  position: fixed;
  top: 50px;
  z-index: 100;
  max-width: 190px;
  margin-top: 100px;
  background-color: #F8F8F8;
  padding: 10px;
}

</style>

If second case => way too complicated and time consuming for such design detail. And Javascript would be needed in addition, specifically by using mutation observers, I think, to have something clean => too much work to do

[Sonu]

Hi Matthieu - thanks so much for a quick response. luckily theres only one list block on the page and your solution works. would need to work on some other settings to make it look nicer but its exactly what I was looking for. will try to make some tweaks and see how it looks. Good thing is the responsive layout remains unaffected. Thanks a lot for this.

[Sonu]

I am able to make it look good with only one problem :). it is overlapping with the footer (see screenshot). is there any way to push the footer below the side bar and still be able to scroll till the end (i know seems complicated and against a fixed sidebar). Found a JS solution here Stick div at top after scrolling example - JSFiddle - Code Playground but would like to avoid using JS on the page. Thanks again

[matthieu_chateau]

You will need JS to perform it. The code you found should do the trick