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 🙂
In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024