Solved

Debut Theme close menu on when moving mouse away

ihernandez
Excursionist
25 0 10

Currently using Debut theme and I added code to make it a hover menu. In order to keep a menu category open you have to click it and then click it again to close it. I want it to automatically close when you move your mouse away to another category (which opens on hover). I don't want to click to close the menu, I want to hover over to a new menu and it closes on its own. I've attached my code and a picture of the current issue.

ihernandez_0-1634831135211.pngihernandez_1-1634831163827.png

 

Accepted Solution (1)
devangfour
Shopify Partner
43 10 8

This is an accepted solution.

Hello @ihernandez 

 

I think you can find clicking part here

  1. Go to Online Store->Theme->Edit code
  2. Asset->/app.js 
Find below code and removed that. 
 

 

cache.subNavToggleBtns.forEach(function(element) {
      element.addEventListener('click', toggleSubNav);
    });

 

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on devangfour@gmail.com regarding any help

View solution in original post

Replies 11 (11)

KetanKumar
Shopify Partner
36839 3635 11972

@ihernandez 

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
ihernandez
Excursionist
25 0 10

@KetanKumar Hi, 

this is currently a draft mode of the menu bar, is there another way i can share this with you?

 

this might work: https://wk9qfvnwna1srj4g-34543632443.shopifypreview.com

KetanKumar
Shopify Partner
36839 3635 11972

@ihernandez 

yes please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.site-nav__dropdown {top: 20px !important;}

 

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
ihernandez
Excursionist
25 0 10

@KetanKumar It's doing the same thing. 

I already have a hover functionality but I'm looking to have it close when I move my mouse away after clicking it open. 

Maybe you can help me void the clicking part so it only hovers and stays open on hover a little longer?

devangfour
Shopify Partner
43 10 8

This is an accepted solution.

Hello @ihernandez 

 

I think you can find clicking part here

  1. Go to Online Store->Theme->Edit code
  2. Asset->/app.js 
Find below code and removed that. 
 

 

cache.subNavToggleBtns.forEach(function(element) {
      element.addEventListener('click', toggleSubNav);
    });

 

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on devangfour@gmail.com regarding any help
ihernandez
Excursionist
25 0 10

thanks it works now!

georgie222
Tourist
3 0 2

Hello, my debut theme mobile menu doesnt open when you tap on it. Here is my store link, thank you www.lifepaintz.com

KetanKumar
Shopify Partner
36839 3635 11972

@georgie222 

sorry for that issue can you please revert your last change theme.js file doesn't work your last code see attachment error

KetanKumar_0-1634872259525.png

 

 

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
georgie222
Tourist
3 0 2

Hello, I do not have the option to revert the code. There is no drop down menu allowing me to click a older version of that code. Can I duplicate the theme and copy a new Theme.js file into the active theme?

georgie222
Tourist
3 0 2

hi i tried copying and pasting a fresh theme.js file from a new debut theme. that still did not fix the issue sadly. 

KetanKumar
Shopify Partner
36839 3635 11972

@georgie222 

can you please download fresh debut theme then check 

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