Horizon Theme: Mega Menu Disappears on Hover (Gap Issue)

Technical Q&A
,
1

Hi everyone, I’m using the Horizon theme and experiencing a frustrating issue with the navigation menu. There is a small “vacuum gap” between the top-level menu link and the dropdown panel. When the mouse moves through this gap, the menu closes immediately, making it very difficult for customers to select sub-menu items. What should I do ?

My Shopify address:https://www.ojeffy.com/

Password:gewpra

2

Hey @Leo_Bryan

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>
@media screen and (min-width: 768px) {
.header__columns.spacing-style {
    padding: 0 !important;
}
}
</style>

RESULT:

image
image1899×917 160 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

3

Hi Moeed
Your solution is very helpful. Now it is running perfectly. Thank you for your time and help.

Best

4

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

Cheers,
Moeed