How To Fix Hover Effect Drop Down Menu Disappearing In Shopify

In this tutorial i will show you how to fix hover effect drop down menu keeps disappearing in Shopify with the drop down disappears before you can reach it.
You’re trying to navigate through your Shopify store and the drop down menu keeps disappearing once you hover over it ? i know It can be incredibly frustrating, especially if you are in a hurry or need to make changes quickly. That is why it is so important that we take the time to fix this issue as soon as possible.
The good news is that fixing menu keeps disappearing problem doesn't have to be difficult or time consuming it just requires some basic troubleshooting steps and a little bit of patience, So we will fix the drop down disappear issue by reducing the padding between the drop down and the header menu and that will stop the menu form disappearing once you hover over it.
Code : pastebin.com/n...
If you have any questions or suggestions my Instagram : / anas_elmedlaoui
About me:
My name is Anas El Medlaoui and i have been around digitally for 8 years making Websites, Mobile Applications, Social Media Promotions, E-commerce etc...
And i have accumulated some experience in multiple fields over the years jumping from project to project (Which wasn't a good idea), I started this UA-cam channel after a year of hesitation to share my knowledge and experience with people that are willing to succeed online with the theory of knowledge for everyone.
#fix #dropdownmenu #shopify

[@Saifi_Steel]

Hello Anas, I still have the issue of disappearing the navigation menu when I hover over a menu item. Can you fix this?

[@srishtisharma1431]

Thanks heaps! This was such a saviour.

[@srai0711]

Brother this does not work on Dawn V13, would you happen to know why?

[@MinnieLitty-b7x]

So, its doing this on my mega menu. Drop down works great but, menu disappears when I switch to mega menu

[@WF_kunashiri_decor]

You can try this：
let items = document.querySelectorAll(".header__inline-menu details");
items.forEach(item => {
let timer;
item.addEventListener("mouseenter", () => {
clearTimeout(timer);
item.setAttribute("open", true);
});
item.addEventListener("mouseleave", () => {
timer = setTimeout(() => {
item.removeAttribute("open");
}, 200);
});
});
Just replace the code he gave us. I added anti-jitter based on his code, limited to shopify with the Mega menu open.

[@punjabilog]

Thank you so much for you codes, when I add them its was giving me proble too, when hover on the menu they just disappear as soon you move curser, I have tried to change top padding but no lcuk. I reliaze the logo size is bigger as soon I make the logo small the problem sorted.

[@OnHOWGuy]

You're very welcome, I see, then it was probably the frame of the logo was covering the drop down frame thats why you had that issue, thanks for pointing that for other people who might have the same problem.
Cheers

[@fabriziomirabella]

thanks for your tutorials, also I wanted to ask you how can you make the menu clickable afert making the submenu appear?

[@Batmanpipi1997]

Just want to say thank you. Just subscribed!

[@josephmaskrey3817]

Hey Anas, Is there a code to do this on the mega menu as when I switch it to mega menu it still disappears when I move my cursor, thanks in advance!

[@mindfullmavericks]

Hello Ana, first, tha k you for these tutorials, they helped a lot of people including me. I have an issue, the buy now button on product page accidentally disappeared, is it possible to bring it back using code.

[@diesaffer]

love the 2 min intro ....classic waffling

[@detrilkerrr]

Hi i also have this problem with megamenu. Can you please do a video about this issue also please?

[@OnHOWGuy]

Did you use an app for megamenu or just default one ?
Please let me know in a new comment as its difficult for me to see replies now.
Cheers

[@addisoncain2153]

@@OnHOWGuy I have this issue with megamenu too. I used the default one. Love your videos!

[@derrystutorialgamingchanne696]

Hi, this didn’t work for me when I wanna move to my other category it still disappears, wandering if you can do another tutorial on how to fix this issue! Thanks.

[@princeojha5460]

Brother
I need help
In Blog post section my client wants "Blog post" in central posting
I use CSS to make in central but not able to do it
Please help me
❤

[@spitfiredarts]

For anyone still with the issue, please replace OnHOW's code with this code...
let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
let timeout;
items.forEach(item => {
item.addEventListener("mouseover", () => {
clearTimeout(timeout);
item.setAttribute("open", true);
});
item.addEventListener("mouseleave", () => {
timeout = setTimeout(() => {
item.removeAttribute("open");
}, 100); // Adjust the delay (in milliseconds) as needed
});
});

[@TWOWOMENANDATOWEL]

Finally...Issue fixed! Thank you!!

[@varley3539]

This is it guys!

[@ajitsahoo1]

Its working properly😊

[@spitfiredarts]

@@ajitsahoo1 good to know :)

[@enricohardel2753]

thanks it works but when I want to switch to another categorie from the header it is stuck

[@lns5092]

my menus still disappear when i try to go past the top sub menu in the dropdown. for example i have a list of sub categories which have multiple options but cant go past the top one without it disappearing

[@philipissa6603]

did you find a solution for that problem?

[@spitfiredarts]

For anyone still with the issue, please replace OnHOW's code with this code...
let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
let timeout;
items.forEach(item => {
item.addEventListener("mouseover", () => {
clearTimeout(timeout);
item.setAttribute("open", true);
});
item.addEventListener("mouseleave", () => {
timeout = setTimeout(() => {
item.removeAttribute("open");
}, 100); // Adjust the delay (in milliseconds) as needed
});
});

[@ismailansari8490]

@@spitfiredarts This code still didnt work for me

[@spitfiredarts]

Add it to the bottom of your base.css and remove the previous code you’ve copied. Also adjust the milliseconds if you’ve got a larger menu

[@MickInvestments]

@@spitfiredarts
let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
let timeout;
items.forEach(item => {
item.addEventListener("mouseover", () => {
clearTimeout(timeout);
item.setAttribute("open", true);
});
item.addEventListener("mouseleave", () => {
timeout = setTimeout(() => {
item.removeAttribute("open");
}, 100); // Adjust the delay (in milliseconds) as needed
});
});
where do i need to change?? it is still goes to fast.

[@AlexysArts]

My issue is different. It does not disappear when I try to go below the menu words at the top. Instead it disappears whenever I try to move my mouse below a sub-menu item, to a menu item beneath that. Any solutions?

[@elchico6830]

Same problem here

[@JuanSanchez-op7fh]

It stil dissapears while keep navigating on the next sublevels, can you please provide a fix for this please. Thank you.

[@ElevaSports]

hey, i have a problem. I have used the code, but the problem is still there. Maybe because i use a Mega Menu

[@Ziavia]

This is not working for the mega menu. Can you please offer a solution??

[@thomasbarbini]

Hello, can you make a video that explains how to have the logo centered and the menu below the logo. I work with the dawn theme and I would really like to have this tutorial Thank's you

[@OnlineDailyStore]

Hi Im working on studio theme and pasted the code as explained, but my drop menu is still disappearing - PLEAE HELP!!

[@sajjadzafar5932]

same

[@donttricktheunicorn]

Hi, I tried this and it didn't work for me. My logo is aligned center and menu is a mega menu to the left side. I still have the issue when I hover the menu just disappears.

[@OnHOWGuy]

When you did add the code it didnt move at all ?
also what theme/version you using ?
Please let me know in a new comment as its difficult for me now to see replies.
Chers

[@didyou9024]

i use Dawn 11.0, Still having same issues after adding code

[@papipapcruist4280]

Thanks man! :)

[@LukeBelmarCommunityy]

Hello brother my website font is only changing on the desktop not on mobile please help

[@jocelynemichelle5111]

how I can make the menu background transparent like the header ? :(

[@elodiermd3156]

Hello, thanks for the video, it's very clear and easy.
I'm on version 10.0.0, my mega-menu scrolls well when I hover over it. However, when I want to click on one of my sub-menus (which are on the far right) the drop-down menu disappears. So I can't click.
Is there a solution so that the mega-menu remains fixed when we want to scroll down to select our sub-menus?
Thanks for your help

[@spitfiredarts]

I'm stuck with this also

[@spitfiredarts]

Fixed it.
Replace his code with this code...
let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
let timeout;
items.forEach(item => {
item.addEventListener("mouseover", () => {
clearTimeout(timeout);
item.setAttribute("open", true);
});
item.addEventListener("mouseleave", () => {
timeout = setTimeout(() => {
item.removeAttribute("open");
}, 100); // Adjust the delay (in milliseconds) as needed
});
});

[@Derrickg987]

@@spitfiredarts this code fixes one problem but creates another. the drop down menu has no scrolling down and disappearing drop down menu issue,however, once you hover over one item in the menu then slide your cursor to the next one, they both stay down instead of one closing once you remove the cursor from that specific menu item. they both stay down. did you find the solution to it?

[@carternell26]

here,
let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
let timeout;
// Function to close all open menus
const closeAllMenus = () => {
items.forEach(item => {
item.removeAttribute("open");
});
};
items.forEach(item => {
item.addEventListener("mouseover", () => {
clearTimeout(timeout);
// Close all open menus
closeAllMenus();
// Open the hovered menu
item.setAttribute("open", true);
});
item.addEventListener("mouseleave", () => {
timeout = setTimeout(() => {
item.removeAttribute("open");
}, 100); // Adjust the delay (in milliseconds) as needed
});
});
@@Derrickg987

[@ViktóriaBujdosó-h4u]

Hello! :)
Could you do "How can i customize the quantity button" tutorial or how can I simply customize any section's text/background color?
I can't find the solution moreeee than 2 hours :"DDD
Thank you so much!

[@Digital_Bliss]

Hey, I commented on the first video on this topic about the disappearing hover. What I was seeing was the menu disappear when there were menu subcategories. I am using Dawn 9.0. I made a screen capture to show it. ua-cam.com/video/gScZ3q4tSTo/v-deo.html.

[@TheBeauExpress]

Did you get solution for this?

[@NoorAlam-np6kr]

Brother can you please do a paypal integration it's way too complicated... the code stuff, love your content

[@devjyotiroy6639]

its not working on mega menu :(

[@OnHOWGuy]

You using an app for mega menu ?

[@devjyotiroy6639]

@@OnHOWGuy no sir

[@TheBeauExpress]

not working for me

[@janitakhalid6259]

not working

[@fewsproducts]

Mine is still the same

[@InfiniteCreationLabs]

doesnt work ???!!!?!??!?!

[@tomeares13]

did not work

[@spitfiredarts]

I;ve done this and still the same issue

[@VirpolSanitaryCOLTD]

hi friend Did you solve it

[@OkAccq-nk1ll]

mheyeeb a khay anas

[@janitakhalid6259]

.header .header__submenu {
top: 30px !important;
}, i specific the code and now its working, thanks for it

[@elchico6830]

It dissapears with mega menu :(