How to display collections with hover in Impulse theme?

Store Design

Topic summary

Main issue: Enable a hover-based dropdown to display collections in the Shopify Impulse theme.

Proposed approach: Edit the theme code via Online Store > Themes > Actions > Edit code. Open sections/header.liquid, locate the dropdown menu code, and adjust the hover behavior using CSS or JavaScript.

Key snippet (CSS):

  • has-dropdown:hover .site-nav__links { display: block; }
    This shows the dropdown when the parent element is hovered.

Current status: The original poster cannot find the referenced file or dropdown code in their theme, so the instructions could not be applied.

Notes:

  • Impulse is a Shopify theme; header.liquid is a theme section file that typically contains navigation markup.
  • “Hover” means showing the dropdown when the mouse moves over the menu item.
  • The CSS snippet is central to the suggestion; no specific markup was provided in the reply.

Outcome: No resolution yet. The thread needs more theme-specific guidance or exact file/selector locations to proceed.

Summarized with AI on January 26. AI used: gpt-5.
1

Hello guys, can you help me with this issue.

Impulse theme dropdown hover. Collections to display when you hover the mouse?

2

To enable the hover effect for displaying collections in the Impulse theme dropdown, you can follow these steps:

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the Impulse theme and click on the “Actions” button.

  3. Select “Edit code” from the dropdown menu to access the theme’s code editor.

  4. In the code editor, navigate to the sections directory and locate the header.liquid file.

  5. Open the header.liquid file and find the code that generates the dropdown menu for collections. It might look similar to this:

  1. Look for the code that handles the dropdown functionality. It might involve JavaScript or CSS classes for showing and hiding the dropdown on hover or click events.

  2. Add or modify the necessary code to enable the hover effect for displaying collections. Here’s an example using CSS:

/* Add a CSS class to the dropdown parent element */

/* CSS styles for the hover effect */
.has-dropdown:hover .site-nav__links {
  display: block;
}
3

Thank you for replaing, but i cant find this things what did u write to me