Want to make your Shopify store's menu open when you hover over it? Follow these easy steps to add this feature.
Step 1: Access Theme Code
Log in to Shopify Admin: Go to Online Store > Themes. Find the Dawn theme and click on "Actions" > "Edit code".
Step 2: Create a New JavaScript File
Create a New File: In the theme editor, look at the left sidebar and click on "Assets". Click on "Add a new asset". Select "Create a blank file" and name it custom-menu.js. Click "Add asset".
Step 3: Add JavaScript Code to the New File
Add Code: Open the newly created custom-menu.js file under "Assets". Add the following JavaScript code:
document.addEventListener('DOMContentLoaded', function() {
let menuItems = document
.querySelector(".header__inline-menu")
.querySelectorAll("details");
for (const menuItem of menuItems) {
menuItem.addEventListener("mouseover", () => {
menuItem.setAttribute("open", true);
menuItem.addEventListener("mouseleave", () => {
menuItem.removeAttribute("open");
});
menuItem.querySelector("ul").addEventListener("mouseleave", () => {
menuItem.removeAttribute("open");
});
});
}
});Step 4: Reference the JavaScript File in the Header
Update header.liquid: In the theme editor, open the header.liquid file. Scroll the file and add the following line where all Rreference files are added:
<script src="{{ 'custom-menu.js' | asset_url }}" defer="defer"></script>Step 5: Save Changes and Test
Save and Preview: Save your changes in the theme editor. Preview your Shopify store to ensure the hover effect works. Test on different devices to ensure the menu functions correctly across various screen sizes.
Conclusion
By following these steps, you can make your Shopify Dawn theme menu open on hover. This small change can improve usability and make it easier for customers to navigate your store. If you need any help, feel free to ask!
Video Tutorial
Here's a video tutorial for how to make the Shopify Dawn theme menu open on hover. Check out the video:
How to Create a Mega Menu in Shopify
You can also check out this guide of How to Create a Mega Menu in Shopify.
