Main menu category's not clickable only drop down menu

Solved

Main menu category's not clickable only drop down menu

Shopadude
New Member
4 0 0

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.

Accepted Solution (1)
DanCodes
Shopify Partner
55 9 6

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>

 

 

 

If you'd like to support my work, you're welcome to treat me to a coffee here: Buy Me a Coffee
If you'd like to hire me, feel free to contact me: E-mail WhatsApp

View solution in original post

Replies 7 (7)

DanCodes
Shopify Partner
55 9 6

Can you share the link to your store?

If you'd like to support my work, you're welcome to treat me to a coffee here: Buy Me a Coffee
If you'd like to hire me, feel free to contact me: E-mail WhatsApp
Shopadude
New Member
4 0 0

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.

DanCodes
Shopify Partner
55 9 6

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>

 

 

 

If you'd like to support my work, you're welcome to treat me to a coffee here: Buy Me a Coffee
If you'd like to hire me, feel free to contact me: E-mail WhatsApp
Shopadude
New Member
4 0 0

Thank you very much! that worked! 

Shopadude
New Member
4 0 0

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?

DanCodes
Shopify Partner
55 9 6

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;

}
If you'd like to support my work, you're welcome to treat me to a coffee here: Buy Me a Coffee
If you'd like to hire me, feel free to contact me: E-mail WhatsApp

harvey47
Visitor
1 0 0

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.