Main navigation menu drop down not working on desktop. Debut Theme

[Jose13]

So this is my store. I used to use a Mega Menu app called qikify which had a great menu. But after some redesign and changes in my collections, I simplified my menu and didn't need the mega menu, so I disabled it. Somehow, it rendered Shopify's native menus in the header, links work but not the drop-down. It works fine on mobile (Mega Menu was not active on mobile). Can someone help figure the issue out? I already contacted the developers but they've a long response time and I need to have this fix quick. I know maybe uninstalling the app and deleting every code might work, however I don't want to loose the data from previous menus, plus there's so many traces of code. Any idea what the problem is?

[KetanKumar]

Hello, @Jose13 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[Jose13]

Hey! Sure, my URL is https://coolpebbles.com

[KetanKumar]

@Jose13 

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

[Jose13]

I'm using a chrome browser, I'll attach a screenshot with an arrow showing the gap. When I try to selecto a sub menu from the drop down y disappears because It's far bellow from the hover.

[PageFly-Victor]

Hi @Jose13 

Please use this code to add to the theme.scss.liquid file

li.site-nav--has-dropdown:hover .site-nav__dropdown {
  display: block;
}

 I provide a guide to improving the store's home page, you can check it here. 

I hope my answer will help with your issue. Like it, if you feel it is helpful or mark it as a solution.

Let me know if you have any questions. Cheers!

[Jose13]

Thank you, this worked nice for enabling the menu, but the drop-down appears a few pixels below so there's no chance to click it before it disappears? Why do you think this is happening?

[PageFly-Victor · Accepted solution]

Hi @Jose13 

Please use this code instead of the old code

li.site-nav--has-dropdown:hover .site-nav__dropdown {
    display: block;
    top: 100%;
}

 Let me know if it works or not.

I hope this helps you. Like it or mark as a solution if you feel it helpful. Cheers!

[Jose13]

It works great! Thanks a lot! I'll also check your guide!

[fibronline]

Thank you!

That worked great

[sindhumani]

Hi Troubleshooter,

 Can anyone help me? I just finished my site set up and at the last moment, my drop-down menu is not working. 

This is my site URL : https://trolleyday.com/

Please help me.

[krhutch31]

Hello!

I was wondering if you could help me as well? I'm having the same problem.

[KetanKumar]

@krhutch31 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Laceezandco]

Hello,

I'm having the same issue, but not sure where to drop the code in the theme.scss.liquid file: 

li.site-nav--has-dropdown:hover .site-nav__dropdown {
display: block;
top: 100%;
}

Does it go anywhere? There's like 7000 lines of code so not sure where to paste...please let me know...

thanks!

[tajones716]

This worked for me! THANK-YOU!!

Terri

www.LakeErieGoods.com

[mmdart]

Can anyone help my site modernmemorydesign.com dropdown not working 

[KetanKumar]

@mmdart 

sorry for this issue can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
or
1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.
or
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

i don't know which file your theme use bt i'm sure this three commona 

.site-navigation .navmenu-item:hover .navmenu-submenu {
    display: block;
}

[sparklestudio]

Hello!

I am having the same issue, and have tried the codes above without success in resolving my main navigation drop down not working. I have the Icon theme and had used the Mega Menu to comprise my main menu, but decided to no longer use that app and am now running into this issue where my drop down doesn’t work.

Website is: www.sparklestudiodesigns.com

Any help would be appreciated, thank you!

[KetanKumar]

@sparklestudio 

sorry for this issue 

i have check now its working fine 

also can you please read this article

[sparklestudio]

Hello! When you view my website on mobile, the navigation works, but when you view my website on the desktop/full size screen the dropdown menu does not work.

[KetanKumar]

@sparklestudio 

are you ready icon theme article how to manage a mega menu?

just flow step go to theme customization header add mega menu

[SRM95]

Hi there,

neither your code and page.flyer's code had worked for me. Are you able to please help - as I'm my mega menu does not drop down on hover on desktop - only mobile. 

Please help1 Thank you.

[pameayelen]

hi! 

I used this code and it worked but only in desktop version, how can I fix the mobile version? Also the slides do not respond to me since I modified the menu previously, do you know how I can fix that?

[KetanKumar]

@pameayelen 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[gkp]

Hi! I am having the same issue as everyone in the above thread. When you view my website on mobile chrome and safari desktop the navigation works, but when you view my website on Chrome desktop the dropdown menu show but are not working. I appreciate any help!

https://www.courseswales.com/

[Jackdimo30]

My main make icon with the 3 vertical lines isn't working. It seems to be appearing behind the slideshow on the main menu. 

Any help would be appreciated.

This is my url, www.zenithgymwear.com 

Thanks.