I have a slideshow with clickable images on my website and It was causing overlap problems with the header/main-menu
I managed to fix it for the desktop version with this
#shopify-section-sections--20228682809650__header {
z-index: 9999 !important;
}
But, I am still having problems on the mobile version of the website
If I open the menu on my mobile and try to click anywhere in it, it clicks on the slide image instead and redirects me to the image link
Also, I would like to know if I could reduce the height of the slides on desktop (enough that the left and right buttons are visible without having to scroll)
Hi @TheStitchGlitch
Please try to use this code instead and check again
#shopify-section-header { z-index: 9999 !important; }
Hi @TheStitchGlitch ,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at the bottom of the file → Save
#MainContent{z-index:-1}
Hope my solution works perfectly for you!
Best regards,
Oliver | PageFly
Doesn’t work.
Using this is bringing the desktop website problem again.
Replacing my fix with this still solves the problem on the desktop version but it doesn’t fix it on the mobile version.
Just some extra information, the desktop website uses a dropdown main menu
and the mobile website uses a burger menu/drawer
.section-header.shopify-section-group-header-group {
z-index: 9999 !important;
}
Found the fix.
Thanks for the help.
