Trouble with z-index of mobile menu after making linked slideshow

[kirstenlc5]

Here's what's going on... I have a slideshow custom code setup to where the entire image is clickable to a collection. This works just fine on desktop, but in mobile version when I open the sidebar menu and try to click on 'Shop' 'Order Tracker' or anything, it clicks on the slideshow link instead.

(See photos below)

This is what I did:

I went in and set the z-index value for the mobile sidebar to 9999 !important, and the clickable slideshow to -1. It finally let me click on the side menu in mobile, but then stopped the slideshow from being clickable!

Then I tried:

Keeping the z-index value for the mobile sidebar to 9999, and just changing the z-index of the side menu to 1, and then tried 10, then it went back to the sidebar menu clicking on the slideshow instead?

Anyone know what to do?

Here's my store:

try-nellies-boutique.myshopify.com

Password: lavishprintshop

Thank you so much in advance...

Kirsten 😍

Clickable slideshow + mobile sidebar

[kirstenlc5]

Please help

[ExpertRookie · Accepted solution]

Hi @kirstenlc5 ,

ExpertRookie here, try to add this code to component-slideshow.css to fix your issue

slideshow-component .slideshow.banner {
    z-index: 1;
}

Please try it and let me know

[kirstenlc5]

Hi, it worked, thank you so much

[TCLee]

I've been checking for similar solution, and yours is the only one worked for me!

Thank you!