I want to make the collection filter section to be sticky on all the devices.
THANKS IN ADVANCE.
Topic summary
Goal: Make the collection filter section sticky across all devices and prevent overlap with the announcement bar.
What was done:
- Added CSS in base.css to make the filter sticky: set #main-collection-filters { position: sticky; top: 0; z-index: 100; background: white }.
- Result: Sticky works, but the announcement bar overlaps the filter on scroll.
Proposed fixes:
- Increase stacking order and set background to avoid visual overlap: raise z-index (suggested 102) and adjust styles for the filter bar.
- Additional rule to handle mobile facet drawer state: apply z-index: 102 to #MainContent when .mobile-facets__disclosure.menu-opening is present using the :has() selector.
Notes:
- z-index controls element stacking; higher values appear above lower ones.
- :has() is a CSS relational selector used here to elevate MainContent only when the mobile filter menu is open.
- Screenshots were shared to show the desired sticky behavior and the overlap issue on mobile.
Status:
- No final confirmation from the requester that the overlap is fully resolved. Discussion appears open pending verification.
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
It’s working but there is an small issue that the announcement bar is overlapped. I want to make the filter bar on top
@Sivadarshan
Please update the css it will solve the issues
#main-collection-filters {
position: sticky;
top: 0;
z-index: 102;
background-color: #f5f5f5;
}
1 Like
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; }
@Sivadarshan Do not forget to like the solution 