Mirrored text corrupting mega menu

I am creating a Shopify store using Refresh as a theme. I have been highly editing HTML / CSS to create a tiled display that uses Parent/child/grandchild/great grandchild

My grandchild collection tiles are unstable, that is when I navigate to the grandchild collection page, then navigate to another mega menu collection, the tiles and text remain on the screen. I may need to hire someone, as I am not up to speed on most of this and have been using unpaid and paid AI to help me. I am uploading an image of a corrupted page. Hopefully someone will have a clue. AI is great, but it tends to lead you in circles.

Since there is a lot of custom code you’d need to share a link to your store and a preview password if one is set.

Thank you. centralcitytool.com
trepsy

Hello there, I’ve just see the collection Grid, Router bits but I didn’t see the issue with wrong showing the title of the products. Here what I see.

So if you navigate to any of those collections on the page showing, then navigate from there back to router bits, circular saw blades or ccts mfg tooling, you will see that the names from the menu you were just on remain visible. If you click on dev tools, you will see that not only are the words still there, but the tiles as well. So, it is leaving the entire section open when navigating back.

Hey @toolmonger

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
.blade-category-grid * {
    z-index: 1 !important;
}
</style>

RESULT:

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

Wow. So simple. Thank you so much.

Do you do this work for a living? I may need more help.

Mike

Glad to hear that it worked well for you.

I’ll be more than happy to help you out Mike, Feel free to Connect with me or drop me a private message and share the details with me and I’ll get it sorted out for you.

Cheers,
Moeed