Main menu category's not clickable only drop down menu

Topic summary

A Shopify store owner encountered an issue where main menu categories with dropdown menus were not clickable—only the dropdown items themselves worked. The user wanted clicking the parent category to navigate to its dedicated page while still maintaining hover functionality.

Solution Provided:
DanCodes diagnosed the problem after reviewing the store and provided a code fix:

  • Edit header-mega-menu.liquid in the Snippets folder
  • Add an <a> tag on line 19 to make parent categories clickable

Follow-up Issue:
After implementing the fix, the first two menu categories changed color to purple instead of white.

Color Fix:
DanCodes provided additional CSS code for the base.css file:

  • Added styles to inherit color properly and remove unwanted text decoration on open dropdown menus

The original poster confirmed the initial fix worked. A third user later posted a generic troubleshooting guide for WordPress menus, which appears unrelated to this Shopify-specific issue.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
  1. Go to Online Store.

  2. Click Edit code.

  3. Find the assets folder.

  4. Find the file base.css.

  5. Add code below:

details >.header__menu-item a {

color: inherit;

} 

details[open]>.header__menu-item {

text-decoration: none;

}