-
Go to Online Store.
-
Click Edit code.
-
Find the assets folder.
-
Find the file base.css.
-
Add code below:
details >.header__menu-item a {
color: inherit;
}
details[open]>.header__menu-item {
text-decoration: none;
}
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:
header-mega-menu.liquid in the Snippets folder<a> tag on line 19 to make parent categories clickableFollow-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:
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.
Go to Online Store.
Click Edit code.
Find the assets folder.
Find the file base.css.
Add code below:
details >.header__menu-item a {
color: inherit;
}
details[open]>.header__menu-item {
text-decoration: none;
}