DAWN theme - menu

[Dulciedreams1]

Currently on my main navigation menu, you have to click each menu to open the drop down to find further pages.

Is there a way to open/preview the menus when you hover over them rather than having to click each menu to open the dropdowns?

hope that makes sense!

[namphan · Accepted solution]

Hi @Dulciedreams1,

Please go to Actions > Edit code > theme.liquid file. Open theme.liquid file, copy and paste this code below before </body> element and save the file:

<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>

[Dulciedreams1]

Thankyou so much!

[namphan]

Hi @Dulciedreams1,

If you have any questions, you can contact me directly.
Nice to meet you 😊

[hiba665]

Hello sir I need your help , I'm facing a problem in tablet and mobile view , when I click the gurger icon a white transaprant backaground aprears instead of the menu , help me please to solve it 

here it is my website I used dawn them : https://www.cozmic.me/ 

[namphan]

Hi @hiba665,

I checked and it shows fine, did you solve it?

[hiba665]

Thank you so much , the problem was in the code I ensert it to make the website from RTF when arabic language is selected  , I found the solution here : https://community.shopify.com/c/shopify-design/hamburger-menu-on-mobile-isn-t-working/m-p/2626283

[namphan]

Hi @hiba665,

Congratulation!

If you have any questions, you can contact me directly.
Nice to meet you 😊