This issue is difficult to explain. I know there is an issue with coding but I don’t know how to fix it. From the header menu, if you click on clothing and then on any category the page is directed our Christmas Collection. The Christmas collection is linked to my website banner which is underneath the drop down menu.
After leaving the home page, if you select the page you want navigate to it takes you to the correct page.
Can anyone help me figure out how to fix this?
Hey do you mind posting a link to your store so we can try to recreate the issue?
When you do I’ll take a closer look.
Hey @Katielabernathy
The issue you’re describing sounds like it could be related to the z-index stacking order or an overlapping element issue in your website CSS. It possible that the banner for the Christmas Collection has a higher z-index or is somehow overlapping the drop-down menu capturing the clicks intended for the drop-down items.
Here’s a general approach to troubleshoot and potentially fix the issue:
Inspect Elements: Use your browser’s developer tools to inspect the menu and the banner elements. Look for the CSS properties z-index, position, and any height or width properties that may cause the banner to overlap with the menu.
Adjust Z-Index: Ensure that the drop-down menu has a higher z-index value than the banner. This will make the browser render the drop-down menu on top of the banner.
Check Positioning: Make sure that the positioning of the elements is correct. The drop-down should not extend beyond its intended boundaries, and the banner should not overlay it.
For a more sepecific solution, share your store URL
Thanks
Hi, thank you so much! I tried looking into this but I truly don’t understand website coding. It appeared that the z -index was crossed out in the banner css? My url is shophelloindigo.com.
I followed the instructions you gave on how to recreate the issue but I didn’t encounter it myself.
This is what I did when I tried to recreate it:
Did I miss any steps in trying to recreate the issue?
Either way since the Christmas banner is directly underneath it, it does make sense for this to be a z-index issue.
Play around with different values for z-index until you find one that allows your menu navigation to properly be on top of your Christmas banner then go to the theme customizer and add some custom css to permanently set that z-index value.
Let us know if that works out for you.
Cannot see the issue you told on Shophelloindigo.com, perhaps is some browser specific. Please you try on some other computer.
Hi, I was able to temporarily fix the issue by removing the collection link and adding a visible “shop now” button. Please see image.
I would like my customers to be able to click anywhere on the banner image and it take them to a linked collection page, not have to click on the “shop now” button. I’d like to remove the “shop now” button and the retainer on the mobile version without the dropdown menu being affected. Can someone take a look at the coding and help me fix this?
Hi, I was able to temporarily fix the issue by removing the collection link and adding a visible “shop now” button. Please see image.
I would like my customers to be able to click anywhere on the banner image and it take them to a linked collection page, not have to click on the “shop now” button. I’d like to remove the “shop now” button and the retainer on the mobile version without the dropdown menu being affected. Can someone take a look at the coding and help me fix this?
