Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

Solved

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

Jose13
Shopify Partner
122 1 13

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?

Accepted Solution (1)
PageFly-Victor
Shopify Partner
7865 1786 3115

This is an 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!

View solution in original post

Replies 25 (25)

KetanKumar
Shopify Partner
37308 3652 12095

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Jose13
Shopify Partner
122 1 13

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

KetanKumar
Shopify Partner
37308 3652 12095

@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?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Jose13
Shopify Partner
122 1 13

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.

 

screenshot.jpg

PageFly-Victor
Shopify Partner
7865 1786 3115

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
Shopify Partner
122 1 13

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
Shopify Partner
7865 1786 3115

This is an 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
Shopify Partner
122 1 13

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

fibronline
Visitor
1 0 0

Thank you!

 

That worked great

sindhumani
Visitor
2 0 0

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
Tourist
3 0 1

Hello!

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

KetanKumar
Shopify Partner
37308 3652 12095

@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.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Laceezandco
Visitor
1 0 0

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
Tourist
10 0 1

This worked for me! THANK-YOU!!

Terri

www.LakeErieGoods.com

mmdart
Tourist
6 0 1

Can anyone help my site modernmemorydesign.com dropdown not working 

KetanKumar
Shopify Partner
37308 3652 12095

@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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
sparklestudio
Visitor
2 0 0

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
Shopify Partner
37308 3652 12095

@sparklestudio 

sorry for this issue 

i have check now its working fine 

also can you please read this article

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
sparklestudio
Visitor
2 0 0

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
Shopify Partner
37308 3652 12095

@sparklestudio 

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

just flow step go to theme customization header add mega menu

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
SRM95
Visitor
2 0 0

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
Tourist
4 0 1

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
Shopify Partner
37308 3652 12095

@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.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
gkp
Visitor
1 0 0

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
Visitor
1 0 0

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.