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

Technical Q&A
1

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!

2

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.

3

Hi! Yes I have it linked. It works on mobile but not for desktop for some
reason

4

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.

5

Here’s a link

Site preview:

https://jh7du99vhyw1n1fg-51828392109.shopifypreview.com

Thanks, appreciate your help

6

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

1 Like
7

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 %}

  • {{ link.title }}{% include ‘icon-chevron-down’ %}

    Replace the element with the following:

    {{ link.title }}