Create a Hover Dropdown Menu in Shopify Debut Theme (CSS Tutorial)

By default, the Shopify Debut theme requires users to click on a menu item to reveal the dropdown options. While functional, many store owners prefer a hover effect for a smoother, more modern user experience.

In this tutorial, we will walk through how to edit your theme code to convert the standard click menu into a hover dropdown menu. We will also cover how to adjust the positioning to ensure the menu doesn't disappear when a user tries to click a link.

Step 1: Access Your Theme Code

To begin, log in to your Shopify Admin dashboard.

1. Navigate to Online Store in the left-hand menu.
2. Ensure you are on the Themes page.
3. Find your live theme (Debut), click the Actions dropdown button, and select Edit code.

Step 2: Locate the CSS File

We need to modify the stylesheet that controls your theme's appearance.

1. In the file directory sidebar, scroll down to the Assets folder.
2. Click to open theme.scss.liquid or theme.css (the name varies slightly depending on your specific version of Debut).
3. If you cannot find it, use the search bar at the top of the file list and type theme.

Step 3: Add the Hover CSS Code

Once the file is open, scroll all the way to the very bottom. It is best practice to add new code at the end of the file so you can easily track your customizations.

Before adding the code, create a comment to label your changes. This helps you identify your custom code later if you need to debug or remove it.

/* Hover Dropdown Menu */

Next, paste the following CSS code. This code targets the navigation classes and changes the display attribute to block when the mouse hovers over or focuses on the parent item.

.site-nav--has-dropdown:hover .site-nav__dropdown,
.site-nav--has-dropdown:focus .site-nav__dropdown {
  display: block;
}

Step 4: Fix the Menu Gap Issue

After adding the code above, the menu will open on hover. However, you may notice a usability issue: there is often a gap between the header and the dropdown menu. If a user moves their mouse too slowly, the gap causes the menu to close (display: none) before they can click a link.

To fix this, we need to move the dropdown menu upwards so it sits flush against the header.

Add the following code immediately after your previous snippet:

.site-nav__dropdown {
  top: 25px;
}

Adjusting the Pixel Value

Depending on the size of your logo and header padding, 25px might not be perfect for your specific store.

• If the menu overlaps the header: Increase the pixel value (e.g., 30px).
• If there is still a gap: Decrease the pixel value (e.g., 20px or 15px).

Test this by hovering over the menu and moving your mouse down to the links. It should feel seamless.

Step 5: Save and Test

1. Add a closing comment to keep your code organized:

   /* End Hover Dropdown Menu */
   

2. Click Save in the top right corner.
3. Refresh your live store and test the navigation menu.

You should now have a fully functional hover dropdown menu on your Shopify Debut theme!