How to change menu to appear on hover desktop

[Aleksander22]

Hi,

I need help with adding code including appearing menu on hover on desktop. Specifically mega menu. I would be grateful for help

[BSSCommerce-B2B · Accepted solution]

@Aleksander22 , follow these step

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above </body>

<script>
    document.addEventListener("DOMContentLoaded", (event) => {
        let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
        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>

Step 4: Find the file base.css and add this code to the end

header-menu [open] summary:after {
  content: "";
  position: absolute;
  height: 2em;
  top: 3em;
  left: -2em;
  right: -2em;
}

Hope it helps 😊

[BSS-TekLabs]

Can you describe the problem you're having more clearly?

[Aleksander22]

Thanks for your support  the other guy already help me

[BSSCommerce-B2B · Accepted solution]

@Aleksander22 , follow these step

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above </body>

<script>
    document.addEventListener("DOMContentLoaded", (event) => {
        let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
        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>

Step 4: Find the file base.css and add this code to the end

header-menu [open] summary:after {
  content: "";
  position: absolute;
  height: 2em;
  top: 3em;
  left: -2em;
  right: -2em;
}

Hope it helps 😊

[Aleksander22]

And could you also help me with one thing. I have to add thing like when you open mega menu background is turning into blury. Like on this example

[BSSCommerce-B2B · Accepted solution]

@Aleksander22, change the previous code in theme.liquid file like this

<script>
    document.addEventListener("DOMContentLoaded", (event) => {
        let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
        items.forEach(item => {
          item.addEventListener("mouseover", () => {
            item.setAttribute("open", true);
            item.querySelector("ul").addEventListener("mouseleave", () => {
              item.removeAttribute("open");
            });
            item.addEventListener("mouseleave", () => {
              item.removeAttribute("open");
            });
        });
       });
      const listItems = document.querySelectorAll('.list-menu');
      const mainContent = document.getElementById('MainContent');
      
      listItems.forEach(item => {
        item.addEventListener('mouseenter', () => {
          mainContent.style.filter = 'blur(4px)';
        });
      
        item.addEventListener('mouseleave', () => {
          mainContent.style.filter = 'none';
        });
      });
    });
</script>

Result:

[Aleksander22]

And last thing my content move to the left and it was in center how can I solve that

[BSSCommerce-B2B]

@Aleksander22, You mean this one ?

If so you could add this code to end of base.css file

.mega-menu__list {
    display: flex!important;
    justify-content: center;
}
.mega-menu__list > li {
    width: 16.67%;
}