All things Shopify and commerce
My main menu category's that have a drop down are not clickable. only the category's that do not have dropdown work. I have every main menu category linked to their own page, so when i click on main category it should open on that category page but, it does not. I'm only able to click what's in my dropdown menu. i have hover over menu on so when i do click on main category nothing happens. I want it to go to its own page.
can someone help me please, I've been on this for days now.
Solved! Go to the solution
This is an accepted solution.
1. Go to Online Store.
2. Click Edit code.
3. Find the Snippets folder.
4. Find the file header-mega-menu.liquid.
5. Add the <a> tag on line 19. See the example code below:
<a href="{{ link.url }}">
<span
{%- if link.child_active %}
class="header__active-menu-item"
{% endif %}
>
{{- link.title | escape -}}
</span>
</a>
Can you share the link to your store?
https://qualityhomeselections.com
pw: h
The hover option works but as soon as you get off category it disappears instead of being able to click on one of the sub menus underneath.
This is an accepted solution.
1. Go to Online Store.
2. Click Edit code.
3. Find the Snippets folder.
4. Find the file header-mega-menu.liquid.
5. Add the <a> tag on line 19. See the example code below:
<a href="{{ link.url }}">
<span
{%- if link.child_active %}
class="header__active-menu-item"
{% endif %}
>
{{- link.title | escape -}}
</span>
</a>
Thank you very much! that worked!
Hey dan,
after fixing the problem with clicking main category, the colors on the first 2 changed to purple.
i looked over the theme settings and it is set correctly.
how can i get the colors back to white like the original?
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;
}
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.
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025