Re: SENSE theme slideshow image overlaps the main menu on mobile

Solved

SENSE theme slideshow image overlaps the main menu on mobile

TheStitchGlitch
Excursionist
17 1 2

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)

Accepted Solution (1)

TheStitchGlitch
Excursionist
17 1 2

This is an accepted solution.

 

.section-header.shopify-section-group-header-group {
  z-index: 9999 !important;
}

 

 

Found the fix. 
Thanks for the help.

View solution in original post

Replies 5 (5)

Dan-From-Ryviu
Shopify Partner
10993 2154 2294

Hi @TheStitchGlitch 

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.

TheStitchGlitch
Excursionist
17 1 2

Doesn't work.
Using this is bringing the desktop website problem again.

PageFly-Oliver
Shopify Partner
878 190 185

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.

TheStitchGlitch
Excursionist
17 1 2

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

Screenshot_1.png

and the mobile website uses a burger menu/drawer

Screenshot_2.png

TheStitchGlitch
Excursionist
17 1 2

This is an accepted solution.

 

.section-header.shopify-section-group-header-group {
  z-index: 9999 !important;
}

 

 

Found the fix. 
Thanks for the help.