Dropdown menu issue

olivierttt
New Member
11 0 0

When I hover on the bottom-pointed arrow icon on navigation (image below), it won't auto display my dropdown menu as I have to click on that arrow icon to show menu items. Please help me to write a code, thanks!!! My web: https://lookpositive.com/

olivierttt_0-1711077875046.png

 

 

Replies 12 (12)

suyash1
Shopify Partner
9123 1135 1481

@olivierttt - check your javascript code, it must have event on click to open menu, you need to change it to hover event, this requires JavaScript knowledge hence if you are not familiar then you will need someone who is expert in it. And since this would be the coding adjustment I doubt if anyone will do it for free.

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session

Dan-From-Ryviu
Shopify Partner
7514 1450 1447

HI @olivierttt 

You can try to add this code to your theme.liquid file before </head> in Online Store > Themes > Edit code and check if it works 

   <script>
      const inlineMenu = document.querySelector(".header__inline-menu");
      const detailsItems = inlineMenu.querySelectorAll("details");
    
      detailsItems.forEach(item => {
        const ulElement = item.querySelector("ul");
    
        item.addEventListener("mouseover", () => {
          item.setAttribute("open", true);
    
          ulElement.addEventListener("mouseleave", () => {
            item.removeAttribute("open");
          });
    
          item.addEventListener("mouseleave", () => {
            item.removeAttribute("open");
          });
        });
      });
    </script>  

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

olivierttt
New Member
11 0 0

@Dan-From-Ryviu Hi, thanks for your help, I tried to add but it does not work unfortunately 😞

Dan-From-Ryviu
Shopify Partner
7514 1450 1447

Did you save your file after adding the code? Because I cannot find it?

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

olivierttt
New Member
11 0 0

@Dan-From-Ryviu For sure, I saved it and preview with an incognito but it did not work then I removed the code. Does it need time to update on storefront? 

Dan-From-Ryviu
Shopify Partner
7514 1450 1447

No, it will not. Could you add code, save your file so I can check?

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

olivierttt
New Member
11 0 0

@Dan-From-Ryviu Done! Please check, your support is much appreciated!

olivierttt_0-1711078762411.png

 

Dan-From-Ryviu
Shopify Partner
7514 1450 1447

Please add it before </head>, you added it before <head>

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

olivierttt
New Member
11 0 0

@Dan-From-Ryviu I changed the position now but it still did not work

olivierttt_1-1711079095541.png

 

Dan-From-Ryviu
Shopify Partner
7514 1450 1447

Please try to update your code to this and move it before </html>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const inlineMenu = document.querySelector(".header__inline-menu");
      const detailsItems = inlineMenu.querySelectorAll("details");
    
      detailsItems.forEach(item => {
        const ulElement = item.querySelector("ul");
    
        item.addEventListener("mouseover", () => {
          item.setAttribute("open", true);
    
          ulElement.addEventListener("mouseleave", () => {
            item.removeAttribute("open");
          });
    
          item.addEventListener("mouseleave", () => {
            item.removeAttribute("open");
          });
        });
      });
      });
  </script>  

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

olivierttt
New Member
11 0 0

@Dan-From-Ryviu it works but I cannot click on the menu items when the menu drops down! When I hover to any items the menu dissapears

Dan-From-Ryviu
Shopify Partner
7514 1450 1447

Yeah, your dropdown menu opens too far below the main menu, and when the mouse hovers over the parent menu, dropdown menu will disappear.

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now