How to make navbar click only remove the hover

Technical Q&A
, ,

Topic summary

Goal: Change the “Disposables” navbar item in a Shopify theme from hover-to-open to click-to-open for its drawer/submenu.

Context: A preview link was shared. The request is specifically to disable hover behavior so the drawer opens only on click.

Proposed approach:

  • Remove or modify hover-based CSS that reveals the submenu (e.g., rules like “.menu-item:hover .submenu { display: block; }”).
  • Add JavaScript/jQuery to toggle the submenu/drawer on click of the “Disposables” link instead of hover.

Notes:

  • “Hover-based CSS” refers to using the :hover pseudo-class to show the submenu.
  • “Drawer/submenu” is the dropdown/panel that appears beneath the menu item.
  • The provided CSS example is illustrative; the exact selectors may differ in the theme.

Status: No implementation code for the click handler was posted, and there’s no confirmation of success yet. The issue remains open.

Summarized with AI on December 20. AI used: gpt-5.
1

Hello,

I am trying to make the menu where it says Disposables to be click only instead of hover to open the drawer.

https://metrosmoke.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=144570515670

Thank you

2

Hi,

Hope this will help

Remove or modify any hover-based CSS that opens the submenu

Code example

.menu-item:hover .submenu {
  display: block; /* or any effect that shows the submenu */
}

Use JavaScript/jQuery to add click-based functionality that toggles submenu (drawer) when the “Disposables” link is clicked.