How can I adjust a header overlay filter column on my website?

Store Design

Topic summary

A user encountered a z-index layering issue where a slideshow overlay was conflicting with the header menu. After setting the header to z-index: 100, the header appeared correctly on top, but a new problem emerged: when clicking on collection page filters, the filter dropdown was appearing behind the header instead of on top.

Solution provided:

  • Add CSS code to the theme’s base.css file (Theme > edit code > assets > base.css)
  • Target the filter form element with positioning and z-index properties
  • Specifically: position: absolute !important; and z-index: 999 !important;

Outcome:
The solution successfully resolved the filter overlay issue, allowing the dropdown to display properly above all other elements.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

hi guys, i was having slideshow overlay the header menu, so i coded it and z-index 100 to put in on the front

Now, after this, i always had it on top, even if i take click on filter (collection page) it goes over it.

How to tune it?

site

www.danicoffeeshop.com

2

@clavilla57

Add this code at the bottom of Theme > edit code > assets > base.css

menu-drawer facet-filters-form {
	position: absolute !important;
    z-index: 999 !important;
}

Try it and let me know

3

work as intended thanks a lot