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

Shopify Discussion

Topic summary

A user seeks help creating a custom hover effect for the menu in Shopify’s Dawn theme, sharing a screenshot as reference.

Proposed Solutions:

  • Edit the theme’s theme.scss.liquid file to add custom CSS hover styles targeting menu elements (e.g., changing text and background colors on hover)
  • Alternatively, insert JavaScript code at the bottom of the theme.liquid file

Implementation Issue:
One user reports the hover effect works initially but the menu automatically closes when attempting to move the mouse over it, preventing proper interaction.

Status: The discussion remains open with an unresolved usability problem—the hover menu closes prematurely, making it non-functional for navigation.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

Screenshot (23).png
Screenshot (23).png1920Ă—1080 246 KB

1 Like
2

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 */
}
3

i need this for my site: Office Curtains Dubai

4

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:

ZestardTech_0-1684754730310.png
ZestardTech_0-1684754730310.png1535Ă—351 267 KB

1 Like
5

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.

6

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