Collection page filter sticky on all device

[Sivadarshan]

I want to make the collection filter section to be sticky on all the devices.

THANKS IN ADVANCE.

[Arif_Shopidevs]

@Sivadarshan

Step 1: Navigate to your Shopify admin panel and go to “Online Store.”

Step 2: Click on “Themes” and then select Edit code

Step 3: Find base.css

#main-collection-filters {
    position: sticky;
    top: 0; /* Adjust the top value as needed */
    z-index: 100; /* Ensures it stays above other content */
    background-color: white; /* Optional: Set background color to avoid overlapping content */
}

the it will be sticky like this

Found it helpful? Please like and mark the solution that helped you.
Thank you

[Sivadarshan]

It’s working but there is an small issue that the announcement bar is overlapped. I want to make the filter bar on top

[Arif_Shopidevs]

@Sivadarshan
Please update the css it will solve the issues

#main-collection-filters {
    position: sticky;
    top: 0;
    z-index: 102;
    background-color: #f5f5f5;
}

[Dan-From-Ryviu]

Hi @Sivadarshan

You can add this additional code to solve the issue with the announcement bar

#MainContent:has(.mobile-facets__disclosure.menu-opening) { z-index: 102; }

[Arif_Shopidevs]

@Sivadarshan Do not forget to like the solution