Shopify themes, liquid, logos, and UX
Hello, and thanks in advance to everyone willing to help 🙂
I want to setup a mega menu on Dawn Theme that would open when hovering instead of clicking the links. Here, nothing is wrong, it works fine thanks to this script I added in "header.liquid" :
<script> let items = document.querySelectorAll(".mega-menu") let header = document.querySelector('header') let currentItemIndex items.forEach((item, itemIndex) => { const content = item.querySelector(".mega-menu__content") item.addEventListener("mouseover", () => { if ( (currentItemIndex === 0 && currentItemIndex !== itemIndex) || (currentItemIndex && currentItemIndex !== itemIndex) ) { items[currentItemIndex].removeAttribute("open") } currentItemIndex = itemIndex item.setAttribute("open", true) }) item.addEventListener("mouseleave", (event) => { let close = true const closeTimeout = setTimeout(() => { if (close) item.removeAttribute("open") }, 200) content.addEventListener("mouseover", () => { close = false }) item.addEventListener("mouseover", () => { clearTimeout(closeTimeout) }) }) content.addEventListener("mouseleave", () => { item.removeAttribute("open") }) }) </script>
Then, I put an opacity transition in the "component-mega-menu.css" file:
.mega-menu { position: static; opacity: 0; transition: opacity 0.3s ease-in-out; } .mega-menu:hover { opacity: 1; }
The problem is that now the links in the navbar are also getting the "opacity: 0" and are invisible until I hover them :
I have been trying for hours to put "opacity: 1 !important" on every elements of the Header to try to make the links visible again without canceling the fade animation of the mega menu, but I can't seem to find the right thing to do. If someone has the solution, I would be very thankful 🙏
Link to the test store: https://cbdlissetheme.myshopify.com/
Password : teafla
Solved! Go to the solution
This is an accepted solution.
I figured it out. For those with the same issue, here's what I did :
In component-mega-menu.css :
.mega-menu[open] .mega-menu__content {
opacity: 1;
transform: translateX(0%);
animation: animateMenuOpen var(--duration-default) ease;
}
It now works 🙂
This is an accepted solution.
I figured it out. For those with the same issue, here's what I did :
In component-mega-menu.css :
.mega-menu[open] .mega-menu__content {
opacity: 1;
transform: translateX(0%);
animation: animateMenuOpen var(--duration-default) ease;
}
It now works 🙂
I’ve done it just like you, but it only works the first time, right after refreshing the page. If I hover over it a second time, it stops working. Are you experiencing the same issue?
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024