DAWN theme - menu

Solved

DAWN theme - menu

Dulciedreams1
Tourist
9 0 3

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!

Accepted Solution (1)

namphan
Shopify Partner
1574 195 216

This is an 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>

Screenshot.png

 

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com

View solution in original post

Replies 7 (7)

namphan
Shopify Partner
1574 195 216

This is an 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>

Screenshot.png

 

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
Dulciedreams1
Tourist
9 0 3

Thankyou so much!

namphan
Shopify Partner
1574 195 216

Hi @Dulciedreams1,

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

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
hiba665
Tourist
10 0 4

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
Shopify Partner
1574 195 216

Hi @hiba665,

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

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
hiba665
Tourist
10 0 4

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
Shopify Partner
1574 195 216

Hi @hiba665,

Congratulation!

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

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com