Hi thanks your code works, but there is an issue in the experience. Cos when my mouse is hovering from the level 1 menu, to the level 2 menu, the moment when the mouse move away from the level 1 menu, on the way towards the level 2 menu, the menu disappears, cos the mouse has hovered away from the level 1 menu, so I have to be very quick with my mouse when moving from level 1 to level 2. So overall the experience is not good for the visitor. Is there any thing that can be done for this ? eg when the mouse is hovering between the spaces of level 1 and level 2 menu, the menu remains open. Thanks
thx will, it worked with a single drop-down menu, yet it did not work on a double-nested drop-down menu. On a double-nested drop down the menu disappears when you try to bring your mouse right after double-nested items. Any chance to help with this?
Thank so much for this!! Used your old tutorial on old Dawn website and wanted to update to new Dawn theme so needed this for it! Can you also show how to make them clickable like you did with old Dawn them. Thanks so much!
@@WillMisback Hi, love this, thank you so much! Can you please guide me to the link for Part 2 of this video (clickable title menu). I can't seem to find it. I only see the old video.
I am having an issue with this code, I have added sub menus to my menus, and the hover works for the first set of menus but once I navigate past the first submenu, the whole menu closes... can you please help?
@WillMisback this fix works perfectly for studio template but for trade the dropdown gets closed as soon as we move the cursor to the items in the dropdown. What would your suggestion be to deal with this problem?
Hey Vasu that's probably an issue with the spacing of those elements. This will only work if your cursor is hovering over certain elements. Fixes would be changing padding/margins or expanding the kinds of elements the hover works on.
Great video! I'm using it to show subcollections of my store, but i have a question, since you can hover the mouse on the menu to make the dropdown, is there any way to make it that if you click the menu you go to the collection? The way it's working right now is when i click it it will just close the dropdown menu.
Thanks for your help! Im having problem when hovering on menu and scrolling down to click on menu drop down category it dissapears befire i can reach the category Can u help with this?
![Blox Fruits Dragon Rework Update [Full Stream]](http://i.ytimg.com/vi/EqDAp8udhm0/mqdefault.jpg)
Code to go in assets/menu-dropdown.js:
let items = document
.querySelector(".header__inline-menu")
.querySelectorAll("details");
for (const item of items) {
item.addEventListener("mouseover", () => {
item.setAttribute("open", true);
item.querySelector("ul").addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
item.addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
});
}
Linking code in sections/header.liquid:
Hi thanks your code works, but there is an issue in the experience. Cos when my mouse is hovering from the level 1 menu, to the level 2 menu, the moment when the mouse move away from the level 1 menu, on the way towards the level 2 menu, the menu disappears, cos the mouse has hovered away from the level 1 menu, so I have to be very quick with my mouse when moving from level 1 to level 2. So overall the experience is not good for the visitor. Is there any thing that can be done for this ? eg when the mouse is hovering between the spaces of level 1 and level 2 menu, the menu remains open. Thanks
worked perfectly, and the presentation was easy to follow! Thanks so much Will!
Thanks for the kind words David!
Thanks for this help. Get ready to see this on my page when it’s realised!
Easy, straight to the point, and awesome. Thank you
Glad to hear it!
Worked like a charm!
Awesome! Thanks for letting me know!
the dropdown menu disappears when you try to click on any category on the dropdown menu all page except homepage.
Thank you!
You are welcome!
thx will, it worked with a single drop-down menu, yet it did not work on a double-nested drop-down menu. On a double-nested drop down the menu disappears when you try to bring your mouse right after double-nested items. Any chance to help with this?
Thank so much for this!! Used your old tutorial on old Dawn website and wanted to update to new Dawn theme so needed this for it! Can you also show how to make them clickable like you did with old Dawn them. Thanks so much!
Will post a part 2 to this tomorrow with that info!
@@WillMisback Hi, love this, thank you so much! Can you please guide me to the link for Part 2 of this video (clickable title menu). I can't seem to find it. I only see the old video.
@@WillMisbackhey, when should we expect part 2? 😇
@@TopGamer-hn4or Yeah part 2 would be great
I am having an issue with this code, I have added sub menus to my menus, and the hover works for the first set of menus but once I navigate past the first submenu, the whole menu closes... can you please help?
hi is it possible to change the code to work with mega menu? Thank you!
yes please
Works perfectly thx
Glad to help!
When should part 2 with the clickable parent be available?
When is part 2 coming? I need it to be clickable❤
@WillMisback this fix works perfectly for studio template but for trade the dropdown gets closed as soon as we move the cursor to the items in the dropdown. What would your suggestion be to deal with this problem?
Hey Vasu that's probably an issue with the spacing of those elements. This will only work if your cursor is hovering over certain elements. Fixes would be changing padding/margins or expanding the kinds of elements the hover works on.
Great video! I'm using it to show subcollections of my store, but i have a question, since you can hover the mouse on the menu to make the dropdown, is there any way to make it that if you click the menu you go to the collection? The way it's working right now is when i click it it will just close the dropdown menu.
I have the same question
Going to record another video on this as I have just seen that others are having this issue
@@WillMisback that would be great
hey love your video. Could you please show how to make header clickable in Sense theme. Thanks so much!
Did you ever find a solution to this? I'm using Taste and when I create a dropdown menu the main menu items are no longer clickable
Good catch! I will post an optional update video to make these items clickable, thanks for letting me know
Thanks for your help! Im having problem when hovering on menu and scrolling down to click on menu drop down category it dissapears befire i can reach the category Can u help with this?
The top of the menu might not be right underneath the dropdown. You may have luck changing its 'top' css property or the 'margin-top' property!
@@WillMisback thank you. Is this done with surface settings or do I have to go through liquid and edit code?
@@Bizarr0 hello, i have been having the same problem and i cant find any solution did you find any solutions by any chance?