Main menu category's not clickable only drop down menu

Shopify Discussion

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.
8

Fix for Non-Clickable Main Menu Categories:
Check Menu Setup:

Go to Appearance > Menus.
Ensure parent categories are linked to pages.
Add CSS Fix:

Go to Appearance > Customize > Additional CSS.
Add:
css
Copy code
.menu-item-has-children > a {
pointer-events: auto;
cursor: pointer;
}
Add JavaScript Fix:

Use WPCode or theme customizer to add:
javascript
Copy code
document.querySelectorAll(‘.menu-item-has-children > a’).forEach(item => {
item.addEventListener(‘click’, function(event) {
if (!this.href || this.href === “#”) {
event.preventDefault();
} else {
window.location.href = this.href;
}
});
});
Check Theme Settings:

Go to Appearance > Customize > Menus.
Ensure parent menu links are enabled.
Use a Plugin:

Install Max Mega Menu for advanced menu control.
Test for Plugin Conflicts:

Deactivate plugins one by one to identify issues.
Switch Themes:

Temporarily switch to a default theme (e.g., Twenty Twenty-Three) to test functionality.