Header's Mega menu that appears on mouse hover even without clicking on details

Store Design
, , , , , ,
1

Hello. First, please understand that the sentences may not be clear because I used a translator.

The menu in the header was structured as a summary within the detail, so when you clicked on the detail, the megamenu would expand. However, I have written JavaScript to make the menu appear when you hover the mouse over it.

However, it is functioning awkwardly, and I would like to know how to fix it. Even when the mouse moves away from Men towards Women, the Men megamenu remains visible. If you hover over the header a few times on the page, you will immediately understand what I mean.

my page link is down below :
https://www.shopzenir.com/

2

Hi, @zenir_official

I can help you with it. But I need to check and modify your theme code . If you need my help, please let me know.

3

Yes, please send me an collab request. my code is 3088.
and my javascript code is down below, and I insert this code in header.liquid file (503th line)

4

Hello, @zenir_official I sent you a collaboration request; please check it.

Best regards
K.K

5

I accepted! :slightly_smiling_face:

6

I have applied the access. Please accept.

7

I accpeted now, thank you!

8

@zenir_official Please try to reference my code.


  


body {
  background: #f0f0f0;
}

h1, .HW__h1 {
  font-size: 36px;
  text-align: center;
  font-size: 5em;
  color: #404041;
}

.HW__navbar-nav > li > .HW__dropdown-menu {
  margin-top: 0px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.HW__navbar-default .HW__navbar-nav > li > a {
  width: 200px;
  font-weight: bold;
}

.HW__mega-dropdown {
  position: static !important;
  width: 80%;
}

.HW__mega-dropdown-menu {
  padding: 20px 0px;
  width: 80%;
  left: 10%;
  right: 10%;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.HW__mega-dropdown-menu > li > ul {
  padding: 10px;
  margin: 0;
}

.HW__mega-dropdown-menu > li > ul > li {
  list-style: none;
}

.HW__mega-dropdown-menu > li > ul > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #999;
  white-space: normal;
}

.HW__mega-dropdown-menu > li ul > li > a:hover,
.HW__mega-dropdown-menu > li ul > li > a:focus {
  text-decoration: none;
  color: #444;
  background-color: #444;
}

.HW__mega-dropdown-menu .HW__dropdown-header {
  color: #428bca;
  font-size: 18px;
  font-weight: bold;
}

.HW__mega-dropdown-menu form {
  margin: 3px 20px;
}

.HW__mega-dropdown-menu .HW__form-group {
  margin-bottom: 3px;
}

document.addEventListener("DOMContentLoaded", function() {
  const dropdowns = document.querySelectorAll(".HW__dropdown");

  dropdowns.forEach(function(dropdown) {
    dropdown.addEventListener("mouseenter", function() {
      const dropdownMenu = dropdown.querySelector(".HW__dropdown-menu");
      if (dropdownMenu) {
        dropdownMenu.style.display = "block";
        dropdownMenu.style.opacity = "0";
        setTimeout(() => {
          dropdownMenu.style.opacity = "1";
          dropdownMenu.style.transition = "opacity 0.2s";
        }, 0);
      }
    });

    dropdown.addEventListener("mouseleave", function() {
      const dropdownMenu = dropdown.querySelector(".HW__dropdown-menu");
      if (dropdownMenu) {
        dropdownMenu.style.opacity = "0";
        dropdownMenu.style.transition = "opacity 0.2s";
        setTimeout(() => {
          dropdownMenu.style.display = "none";
        }, 200);
      }
    });
  });
});

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Best regards
K.K

9

I have fixed the issue for your store. You can check from the copy theme. If there is no any other problem, you can publish the copy. theme.

AnneLuo_0-1730805187205.png
AnneLuo_0-1730805187205.png1079×397 69.8 KB

10

Hi, thank you for trying to solve my problem. But, I cannot solved with this way. So, I think I need your help.