Meteor Menu CSS not working Chrome Mobile

Shopify Apps
, , , ,
1

I have a Dawn theme webstore, and am using the Meteor Mega Menu. On my home page, I have a slideshow that I modified to make the images clickable links. This interfered with the Meteor Menu at first, but then I found a z-index of 3 on the links worked great. However, on Chrome mobile, the image is still clickable through the Meteor Menu, rendering the menu useless on the home page. I paid for the paid version of Meteor Menu so I can edit the CSS. The CSS properly reflects on desktop, but nothing is changing anything on Chrome mobile. I also added “!important” and set positions, but that hasn’t changed anything. Thoughts? Suggestions?

3

https://reetwire.com/

The test device I am having issue with is a Samsung Galaxy S25 running Chrome browser.

Sincerely,
Spencer Reiss
ReetWire, Owner

4

Yes I see the issue.

In order to fix it you need to follow these steps.

Go to Shopify admin >> Online Store >> Edit Code >> base.css

In the end of base.css paste the following code share below.

@media only screen and (max-width: 767px) {
.slideshow__slide a {
      z-index: -1 !important;
}
}
5

I ended up solving my problem, by changing the way I am making my slideshow clickable. Before, I was imposing a link over each image in the slideshow. I changed this by replacing the slideshow “div” with an “a” instead, and that solved my problems, as indexing is no longer required. Thank you for your time.

Sincerely,
Spencer Reiss
ReetWire, Owner

6

Great approach to fix this issue.