Shopify themes, liquid, logos, and UX
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)
Solved! Go to the solution
This is an accepted solution.
.section-header.shopify-section-group-header-group {
z-index: 9999 !important;
}
Found the fix.
Thanks for the help.
Please try to use this code instead and check again
#shopify-section-header { z-index: 9999 !important; }
- Solved it? Hit Like and Accept solution! Support me: ❤️Buy Me a Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Doesn't work.
Using this is bringing the desktop website problem again.
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
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
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
This is an accepted solution.
.section-header.shopify-section-group-header-group {
z-index: 9999 !important;
}
Found the fix.
Thanks for the help.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025