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

Store Design
, , ,
1

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:

Password: lavishprintshop

Thank you so much in advance…

Kirsten :heart_eyes:

Clickable slideshow + mobile sidebar

click3.PNG
click3.PNG353×368 50.8 KB

clcik2.PNG
clcik2.PNG357×527 12.1 KB

2

Please help

3

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

3 Likes
4

Hi, it worked, thank you so much

5

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

Thank you!