Solved

My main categories aren't able to be clicked with a hover drop-down menu.

tapi-oca
Explorer
52 3 8

Hi there,

 

I've created Menu Items with main categories and then categories beneath those. 

 

Ex) 

Main category: Apparel

Drop down from Apparel: Tops, Hats, Shoes, etc

 

I can click on the drop-down menu, but I can't click the first main category (from example, Apparel) to show all the products from the drop-down options. 

 

Does anyone know how to fix this? Thanks!

Accepted Solution (1)
Alan15
Shopify Partner
143 27 62

This is an accepted solution.

It looks like this behavior is by design; it doesn't matter if you set a link on the top level, if there is sub categories the link doesn't work. It's probably considered good design for menus like this, it stops people accidentally clicking and leaving the page when they want to just see the sub menu.

I found this post that goes into a lot of detail on the same issue, and gives a code change solution, but they seemed to find it tricky to get it to work correctly:

https://community.shopify.com/c/Shopify-Design/Debut-Theme-Top-Level-Menu-Item-With-Link/td-p/493572

Another solution is to leave it as is but add an All sub menu item--  Apparel -> All, Tops, Neck Pillows, Bags & Wallets, Slippers

Need more help? Contact me here

View solution in original post

Replies 6 (6)

Alan15
Shopify Partner
143 27 62

Sorry if this is obvious, but are you sure that you have set your menu links correctly in the navigation?

Is it that when you click on Apparel or one of the other categories you want to open the list page for the products, but nothing happens?

If you haven't tried already, go to Online Store -> Navigation -> Main Menu

Click on the Edit button for the different menu items and check that the Link fields are set correctly.

Need more help? Contact me here
tapi-oca
Explorer
52 3 8
Hi! Yes I have it linked. It works on mobile but not for desktop for some
reason
Alan15
Shopify Partner
143 27 62

That's strange. 

Do you know how to use the developer tools in your browser?

You can check if there are any errors returned when you click on the menu item.

Right click on your homepage and select Inspect and look under the Console tab. Might give you some clues.

Post a link to your site if you want, I can see if I notice anything.

Need more help? Contact me here
tapi-oca
Explorer
52 3 8

Here's a link 

Site preview:

https://jh7du99vhyw1n1fg-51828392109.shopifypreview.com

 

Thanks, appreciate your help

Alan15
Shopify Partner
143 27 62

This is an accepted solution.

It looks like this behavior is by design; it doesn't matter if you set a link on the top level, if there is sub categories the link doesn't work. It's probably considered good design for menus like this, it stops people accidentally clicking and leaving the page when they want to just see the sub menu.

I found this post that goes into a lot of detail on the same issue, and gives a code change solution, but they seemed to find it tricky to get it to work correctly:

https://community.shopify.com/c/Shopify-Design/Debut-Theme-Top-Level-Menu-Item-With-Link/td-p/493572

Another solution is to leave it as is but add an All sub menu item--  Apparel -> All, Tops, Neck Pillows, Bags & Wallets, Slippers

Need more help? Contact me here
tapi-oca
Explorer
52 3 8

Thanks for looking into it! 

 

I found the solution on page 4: 

 

In site-nav.liquid

Look for the following code fragment (around line 15) ** mine was line 36 ** 

 

{% if link.links != blank %}

<li class="site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %}{% if link.active %} site-nav--active{% endif %}">

<button class="site-nav__link site-nav__link--main site-nav__link--button{% if link.child_active %} site-nav__link--active{% endif %}" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="SiteNavLabel-{{ child_list_handle }}">

<span class="site-nav__label">{{ link.title }}</span>{% include 'icon-chevron-down' %}

</button>

 

Replace the <button></button> element with the following:

<a href="{{ link.url }}" class="site-nav__link site-nav__link--main{% if link.active %} site-nav__link--active{% endif %}">

<span class="site-nav__label">{{ link.title }}</span>

</a>