Dropdown Hover Menu (Crave Theme)

Retired Boards Appdev Store Design

Topic summary

Main issue: Enable a hover-activated dropdown menu in the Shopify Crave (Online Store 2.0) theme, which uses a different file structure (no theme.scss.liquid) and different navigation references.

What was tried:

  • CSS added in Assets > component-list-menu.css to change background on hover for submenu (.header__submenu.list-menu li:hover) and inline menu items (.header__inline-menu li:hover).
  • This only changed styling and did not create a hover-to-open dropdown.

Proposed solution:

  • Implement JavaScript in sections > header.liquid.
  • Place the snippet immediately after the tag within the if block where section.settings.menu_type_desktop == ‘dropdown’.
  • Screenshots, a GIF demo, and a full header.liquid file were provided (attachments central to applying the fix).

Outcome so far:

  • One store confirmed the hover dropdown now works on Crave.

Newest update / open question:

  • Request to reduce excess space to the right of submenu items; the hover background extends beyond the screen. Store URLs were shared for review.
  • No solution posted yet for this spacing/overflow issue; discussion remains open.
Summarized with AI on February 12. AI used: gpt-5.
1

Have tried to implement the instructions for other themes however Crave has a different file structure as it is a 2.0 theme.

There is no theme.scss.liquid file. Also the navigation menu items have a different references.

Please help with code make a dropdown hover menu on Crave theme.

2

Hey @wbalaile !

Go to the “component-list-menu.css” file which you can find in the “Assets” folder. Then add the following code snippet to the very bottom of the file (this will add background color to the sub-menu items on hover).

.header__submenu.list-menu li:hover {
  background-color: red;
}

If you want to add a hover effect to the menu items in the header, add this code snippet:

.header__inline-menu li:hover {
  background-color: red;
}

Of course, you can adjust the colors as you see fit, or you can add any other styles you want.

If this fixes your issue, please mark my reply as a solution.

3

I have tried the fix you suggested, it changes the menu item background colour only. The fix I am looking for is to have a dropdown menu on hover, not a change in background colour.

4

Thanks for clarifying this @wbalaile !

This will need to be done using JavaScript. Please go to your (header.liquid) file which can be found in the “sections” folder, and add the following code snippet.

Now the most important thing is where to place this code snippet. You will need to place it right after the () tag inside the (if statement) that has the condition (section.settings.menu_type_desktop == ‘dropdown’)

I will highlight the code position in the below screenshot:

Crimson_Shot_0-1654355128559.png
Crimson_Shot_0-1654355128559.png1803×444 106 KB

This will make your drop-down menu show on hover as you can see in the below gif.

22-06-38163-97769.gif

I also attached my header.liquid file so you can copy and paste the entire code if you want to.

Please mark my reply as a solution if this fixes your issue.

1 Like
5

Thank you so much for this!

I’ve enabled the hover effect for my current CRAVE theme.

Is there any way to minimize all the extra space showing to the right of the submenu items?

The hover background extends beyond the screen. Thanks so much again.

https://comicskingdom.myshopify.com/

https://shop.comicskingdom.com