Liquid, JavaScript, themes, sales channels
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!
Solved! Go to the solution
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
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.
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.
Here's a link
Site preview:
https://jh7du99vhyw1n1fg-51828392109.shopifypreview.com
Thanks, appreciate your help
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
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>
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024