How can I adjust the z-index on Dawn theme filter popup?

[Joachimgolf]

Hello Everyone!

I have an issue with the z-index on the filter popup, and i cannot seem to figure out where to adjust it. The problem now is that the filter box when using the "drawer" function in dawn theme, is hidden behind the product images and the header. Can anyone help med find the right place to adjust the Z-index?

On the same note, i also want to move the filter box to the left side.

Here is a preview link of the site, as it not live yet: https://4cm2tgz0pkkbvvqk-50682036424.shopifypreview.com

Thank you!

[PageFly-Richard]

Hi @Joachimgolf 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
#CartDrawer, .drawer__inner {
z-index: 999999999 !important;
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly

 

[Joachimgolf]

Hello @PageFly-Richard !

Thank you for your reply. I tried this, but did not solve the problem. Note that the issue seems to be part of the "FacetFiltersFormMobile", and not the "CartDrawer".

This is the filter pop-up used on collection pages which pops up when using the "drawer" filter option on collection pages.

[PageFly-Richard]

Hi @Joachimgolf 

So sorry to hear that is not working for you.

Then if possible can you please share with me the preview link again? Because it is expired and i need to check the structure on your site to make the code work.

Thank you

[Joachimgolf]

Hello @PageFly-Richard,

I found the issue. The problem was that "page-width" was for some reason set to Z-Index: 2, which caused it to overlap. I removed the Z-Index, and works correctly now.

[PageFly-Richard]

Hi @Joachimgolf 

Glad to hear that is working properly for you now.

Please let me know if you have any questions

[collinwilliams]

Hello! I am currently having this problem: on mobile, the filter drawer is opening underneath my products.

Where did you go to adjust the page-width to remove that Z-index?