How to Create a Hoverable Dropdown Menu in Shopify Venture Theme

Hoverable menus are a polished UI feature that makes a website feel crisp and professional. In my experience, streamlining navigation by removing the need for an extra click can even lead to slight improvements in conversion rates.

By default, the Shopify Venture theme requires customers to click menu items to reveal dropdowns. In this tutorial, I will walk you through how to implement a hover-to-open animation for both your main catalog menu and your sub-menus using simple CSS.

Step 1: Accessing Your Theme Code

To begin, we need to locate the stylesheet for your theme.

1. Log in to your Shopify Dashboard.
2. Navigate to Online Store > Themes.
3. Click on the Actions dropdown menu next to your current theme.
4. Select Edit code.

Step 2: Locating the CSS File

Once the code editor loads, look at the file directory on the left side:

1. Scroll down to the Assets folder.
2. Click to open theme.scss.liquid.

If this file is not automatically open, use the search bar to find it. This is where we will add our custom styles.

Step 3: Adding the Hover Effect to the Main Menu

Scroll to the very bottom of the theme.scss.liquid file. It is best practice to add new code at the end of the file so you don't accidentally disrupt existing styles.

Developer Tip: Always leave a comment before your custom code. This helps you identify your changes later if you need to debug or remove them. Use the format /* comment here */.

Copy and paste the following code snippet at the bottom of the file. This code targets the .site-header and .site-nav__item classes, changing the visibility and opacity of the .meganav when you hover over the menu item.

/* Main drop down hover effect */
.site-header .site-nav__item:hover .meganav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

What this code does:

• Opacity & Visibility: Sets the element to be fully visible (1).
• Transform: Ensures the element is in the correct position.
• Transition: Adds a 0.8-second animation with a cubic-bezier curve to make the appearance smooth rather than jarring.

Step 4: Adding Hover Effects to Sub-Menus (Optional)

If your store has nested menus (sub-menus), you might notice that you still have to click them to reveal the third level of items. If you want these to also open on hover, simply add the following code block immediately after the previous one.

/* Sub drop down hover effect */
.site-nav__item:hover .site-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

Click Save in the top right corner and refresh your storefront to test the behavior.

Step 5: Customizing the Animation Speed

If you find the menu opens too slowly or too quickly, you can customize the transition settings using Google Chrome Developer Tools.

1. Open your website in Google Chrome.
2. Press Ctrl + Shift + C (Windows) or Cmd + Shift + C (Mac) to open Developer Tools.
3. Navigate to the Sources tab.
4. Locate theme.scss.liquid (usually found under cdn.shopify.com > s > files > assets).
5. Scroll to the bottom where your new code is located.

In the styles pane, you can click on the purple cubic-bezier icon to visually adjust the animation curve. You can also change the 0.8s (0.8 seconds) to a lower number for a faster menu, or a higher number for a slower effect.

Once you have found the perfect speed in the Developer Tools, copy that line of code and paste it back into your actual Shopify theme editor to save the changes permanently.

Conclusion

And that is it! You now have a fully functional hoverable dropdown menu on your Venture theme. This small change can significantly modernize the feel of your store.

Note: Always remember to back up your theme before making code changes. If something breaks, you can usually revert to the previous version of the file or remove the code blocks you added.