Shopify themes, liquid, logos, and UX
Hi,
I managed to get the hover option in the coding. But now every time i hover over the menu and the drop down opens, when i try to move down with my cursor to the drop down menu, it closes again. Can someone help me?
As i said, i used someone else's code to make the hover and i have Dawn 13.0 now.
Hope someone can help me out :-). My site is www.klipoorbellen.com in case you need to look!
Thanks,
Britt
Solved! Go to the solution
This is an accepted solution.
This happens because there is a gap between your menu item and corresponding drop-down.
When you move your mouse over this gap it leaves the trigger element and your theme code closes the drop-down.
You may try adding this CSS code to extend your trigger element to cover the gap:
header-menu [open] summary:after {
content: "";
position: absolute;
top: 3em;
height: 2em;
left: -2em;
right: -2em;
}
Can add it right below the JS code you've added earlier:
<script>
let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
console.log(items)
items.forEach(item => {
item.addEventListener("mouseover", () => {
item.setAttribute("open", true);
item.querySelector("ul").addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
item.addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
});
});
</script>
<style>
header-menu [open] summary:after {
content: "";
position: absolute;
height: 2em;
top: 3em;
left: -2em;
right: -2em;
}
</style>
This is an accepted solution.
This happens because there is a gap between your menu item and corresponding drop-down.
When you move your mouse over this gap it leaves the trigger element and your theme code closes the drop-down.
You may try adding this CSS code to extend your trigger element to cover the gap:
header-menu [open] summary:after {
content: "";
position: absolute;
top: 3em;
height: 2em;
left: -2em;
right: -2em;
}
Can add it right below the JS code you've added earlier:
<script>
let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
console.log(items)
items.forEach(item => {
item.addEventListener("mouseover", () => {
item.setAttribute("open", true);
item.querySelector("ul").addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
item.addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
});
});
</script>
<style>
header-menu [open] summary:after {
content: "";
position: absolute;
height: 2em;
top: 3em;
left: -2em;
right: -2em;
}
</style>
Oh my, you are literally my hero!
Thank you so much! Is there anything i can do back for you? Give you a review or something? THANKS!
Hi Tim. I'm having the exact same issue as the author. Could you please guide us as to where we add the codes you've mentioned? I tried adding the CSS code to the actual header section, custom css. Where should I add the JS code?
I'd rather try using "Custom CSS" under "Theme settings".
Do you have "show menu on hover" modification too?
Amazing Tim. It's worked for me. I used a code from someone else to make the mega menu hover but as with the author, I couldn't have it stay open when going to the menu on Dawn theme. Its now worked with putting in the code you've mentioned under theme settings custom css. Thank you 🙂
Hmm...for some reason it doesnt allow me to save now since the code. Comes up with online store editor cant be published
Can you screenshot what you've changed and the message?
Interesting. I'd exit and try again.
Possibly happened due to someone else made changes at the same time or login timeout.
I know this is an old question, but I ran into the same issue with my Mega Menu and the error when adding the code to the custom CSS.
I came across a fix after a bit of extra searching: the CSS needs to be added to the theme.liquid file instead, just before the {% endstyle %} tag
This saved for me and the mega menu now works as intended!
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025