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

Solved
Jose13
Shopify Partner
114 1 11

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
Shopify Partner
18938 1986 6999

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Jose13
Shopify Partner
114 1 11

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

0 Likes

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!

PageFly - Advanced Shopify Page Builder - Empowering 90.000+ active merchants.

Check our Evergreen Guide on Moving Your Brick-n-Mortar Store Online.

Jose13
Shopify Partner
114 1 11

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?

0 Likes
KetanKumar
Shopify Partner
18938 1986 6999

@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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Jose13
Shopify Partner
114 1 11

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

0 Likes

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!

PageFly - Advanced Shopify Page Builder - Empowering 90.000+ active merchants.

Check our Evergreen Guide on Moving Your Brick-n-Mortar Store Online.

Jose13
Shopify Partner
114 1 11

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

0 Likes
sindhumani
New Member
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.

0 Likes