How to fix opacity effect on Dawn Theme's mega menu hover?

[shorty__ad]

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

[shorty__ad · 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 🙂

[Vilcka]

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?