user6952436 user6952436 - 1 month ago 24
CSS Question

Form dropdown goes above the fixed header

I am using fixed position header for mobile in my wordpress website. But the form dropdown is going above the fixed header. It looks very ugly. I tried to fix it by putting these codes but nothing changed.

.site-header{position: fixed; width: 100%; z-index:1;}
select{width: 100%; z-index:2;}


You can go to my website and see the problem.

www.store.codebla.com/product-category/mens-fashion/


This problem is only in mobile because i used fixed header for mobile only. So visit the above link on your mobile phone.

Thanks

Answer

.woocommerce-ordering (the select lives here) has z-index of 999.

You will need to put your header to 1000 or reduce that z-index.

I recommend coming up with a z-index convention.

e.g. go by 100s, and use 110,120,etc. to manage between layers.