Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I have the problem with my store that the main menu is not clickable, only the dropdown menu. I linked for each menu a category but you can't click it, only the sub-categories in the menu. Is someone able to help me? I read a lot that I have to change the liquid code for the header-dropdown-menu-liquid and I tried with chatGPT but I am not able to fix it.
Store link: https://letto-design.com/
Thanks and BR
Solved! Go to the solution
This is an accepted solution.
Please follow these steps:
1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, click the ... button to open the actions menu, and then click Edit code.
3. Open the file snippets/header-dropdown-menu.liquid and find the following snippets:
<summary
id="HeaderMenu-{{ link.handle }}"
class="header__menu-item list-menu__item link focus-inset"
>
<span
{%- if link.child_active %}
class="header__active-menu-item"
{% endif %}
>
{{- link.title | escape -}}
</span>
{% render 'icon-caret' %}
</summary>
And update it like this:
<summary
id="HeaderMenu-{{ link.handle }}"
class="header__menu-item list-menu__item link focus-inset"
>
<a
href="{{ link.url }}"
style="text-decoration: unset;"
>
<span
{%- if link.child_active %}
class="header__active-menu-item"
{% endif %}
>
{{- link.title | escape -}}
</span>
</a>
{% render 'icon-caret' %}
</summary>
4. Save the file and check.
That's it. So you can redirect a page when you click top menu. And when you click arrow button, you can see the child menus.
Please let me know if you have any concern.
Regards,
Vinh
This is an accepted solution.
Please follow these steps:
1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, click the ... button to open the actions menu, and then click Edit code.
3. Open the file snippets/header-dropdown-menu.liquid and find the following snippets:
<summary
id="HeaderMenu-{{ link.handle }}"
class="header__menu-item list-menu__item link focus-inset"
>
<span
{%- if link.child_active %}
class="header__active-menu-item"
{% endif %}
>
{{- link.title | escape -}}
</span>
{% render 'icon-caret' %}
</summary>
And update it like this:
<summary
id="HeaderMenu-{{ link.handle }}"
class="header__menu-item list-menu__item link focus-inset"
>
<a
href="{{ link.url }}"
style="text-decoration: unset;"
>
<span
{%- if link.child_active %}
class="header__active-menu-item"
{% endif %}
>
{{- link.title | escape -}}
</span>
</a>
{% render 'icon-caret' %}
</summary>
4. Save the file and check.
That's it. So you can redirect a page when you click top menu. And when you click arrow button, you can see the child menus.
Please let me know if you have any concern.
Regards,
Vinh
Hi Vinh0225
This worked out for me! Unfortunately now the categories appear in blue color instead of black. Do you know how to resolve this?
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024