Issue: Making a slideshow/banner clickable via a high z-index on the anchor (z-index: 9999) enabled the href, but caused the navigation submenu to appear behind the banner.
Key update: A proposed CSS fix adjusts stacking without relying on an extreme z-index on the link. Add a custom CSS rule to move the banner’s pseudo-element behind other elements: .banner::after { z-index: -1 !important; }.
Steps provided:
Rationale: Lowering the z-index of the banner’s overlay/pseudo-element prevents it from covering the submenu, while preserving the banner’s clickable behavior.
Artifacts: An image was shared demonstrating the corrected layering and working link.
Status: A solution was supplied; no conflicting opinions or additional requirements were noted. Awaiting confirmation from the original poster on final resolution.
If I set the z-index for my banner then href to correct collection works. But this solution leads to my submenu item going behind the banner.
following code I added to get my slide ( Banner ) to take user to collection on clicking
.slideshow .slideshow__slide > a { position: relative; width: 100%; height: 100%; z-index: 9999; } If I use the above code sub menu items going beyond the banner / slide. I need make both work. #please share store URL.
Hi @Aadya
We have checked on your query, and we have the solution for you. You just need to use the code below to fix the issue:
Go to Shopify > Online store > theme > customize
Click to Settings > Custom CSS > Paste this code to the section and save.
.banner::after {
z-index: -1 !important;
}
Here is the result:
