Hi. My dropdown menu is working fine on desktop but when the menu is on two rows and i open a submenu then the main menu items are showing on top of my dropdown menu. As you can tell in the picture there’s one menu item and one submenu item over each other and when trying to click on the submenu item it actually clicks on the main menu item. I want my dropdown block to cover everything below it without my main menu showing up on it. i’m using horizon theme. Website: https://seoul-sound.myshopify.com/
Topic summary
Desktop dropdown menu on a Shopify store (Horizon theme) misbehaves when the main menu wraps to two rows. Opening a submenu (an expanded list under a main menu item) causes main menu items to appear over the dropdown, creating overlap.
Impact: clicking a submenu option instead triggers the underlying main menu item, preventing access to the submenu.
Goal: have the dropdown panel fully cover items beneath it so the main menu does not show through.
Context: Horizon theme; site link provided; a screenshot illustrating the overlap is attached and central to understanding.
Status: initial troubleshooting request with no solution yet; issue remains open.
1 Like
Thank you for answering! I’m talking about when the screen is in between desktop and mobile in size, like on an
ipad.
1 Like
Hey,
I see the issue. In fact this issue is not on Mobile. It’s on Tablet view not in the Mobile view. Let me check that properly and provide you the solution.
Hey @Tilda_Falth
Follow these Steps:
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code in the bottom of the file above </ body> tag
<style>
li:has(a#HeaderMenu-om-seoul-sound) {
z-index: 0 !important;
}
</style>
RESULT:
If I managed to help you then a Like would be truly appreciated.
Best,
Moeed
1 Like
Thank you so much!
1 Like