how to make this type of hover of menu in dawn them

[Rechard]

[NomtechSolution · Accepted solution]

To create a custom hover effect for the menu in the Dawn theme, you'll need to modify the theme's code. Here's a general outline of the steps you can take:

1. From your Shopify admin, go to "Online Store" and click on "Themes."
2. Find the Dawn theme and click on the "Actions" button, then select "Edit code."
3. In the code editor, locate the "theme.scss.liquid" file under the "Assets" folder.
4. Open the "theme.scss.liquid" file and scroll to the bottom to add your custom CSS code.

To create a hover effect for the menu, you can use CSS selectors and properties to target the menu elements and define the desired styles. Here's an example of how you can create a simple hover effect:

/* Apply hover effect to menu items */
.site-nav__link:hover {
  color: red; /* Change the text color on hover */
  background-color: yellow; /* Change the background color on hover */
  /* Add any other styles you want for the hover effect */
}

[NomtechSolution · Accepted solution]

To create a custom hover effect for the menu in the Dawn theme, you'll need to modify the theme's code. Here's a general outline of the steps you can take:

1. From your Shopify admin, go to "Online Store" and click on "Themes."
2. Find the Dawn theme and click on the "Actions" button, then select "Edit code."
3. In the code editor, locate the "theme.scss.liquid" file under the "Assets" folder.
4. Open the "theme.scss.liquid" file and scroll to the bottom to add your custom CSS code.

To create a hover effect for the menu, you can use CSS selectors and properties to target the menu elements and define the desired styles. Here's an example of how you can create a simple hover effect:

/* Apply hover effect to menu items */
.site-nav__link:hover {
  color: red; /* Change the text color on hover */
  background-color: yellow; /* Change the background color on hover */
  /* Add any other styles you want for the hover effect */
}

[interiordesigns]

i need this for my site: Office Curtains Dubai

[ZestardTech · Accepted solution]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Layout -> theme.liquid and paste this at the bottom of the file:

<script>
  let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
  console.log(items)
  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>

[ZestardTech]

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.

[floweractually]

the hover works but as soon as I try to move the mouse it will close automatically which makes the hover menu not work