Fixed Header Overlaps Product Images when zoomed in

[Smokeking]

Hello, i have made my homepage slideshow clickable, after that i was getting a problem where I try to click on submenu options, the slideshow was getting clicked instead of menu options. I fixed that problem by using this code #shopify-section-header {z-index: 1000;} in Base.css 
After i Fixed this, a new problem arised where the Header is fixed and overlaps product images when zoomed in. 
 

[LitExtension · Accepted solution]

Hi @Smokeking,

Go to Assets > base.css and paste this at the bottom of the file:

.product-media-modal[open] {
    z-index: 1001 !important;
}

Hope it helps!