Hello, I have created a nested menu, the first layer of visible options have links inserted, but when clicked they just open the dropdown below, rather than being clickable as they should. Like this:
How we would like it to function is more like this, where all levels of the menu are clickable:
https://shop.neos.co.uk/pages/boost
Using the latest refresh theme. Thanks for your help guys!
Hi @biznazz101
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.
Sure, thank you!
Storefront URL: tinyvpn.app
Pass: Tiloht
Hi @biznazz101
You can follow these suggestions to create a nested menu
Go to themes => edit code => find file header-dropdown-menu.liquid
=> Find the code as below:
<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>
=> Replace it into this code
<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 %}
>
<a
id="HeaderMenu-{{ link.handle }}-{{ link.handle }}"
href="{{ link.url }}"
class="header__menu-item list-menu__item link link--text focus-inset
caption-large{% if link.current %} list-menu__item--active{% endif %}"
{% if link.current %}
aria-current="page"
{% endif %}
>
{{ link.title | escape }}
</a>
</span>
{% render 'icon-caret' %}
</summary>
If it work, please mark as a solution. Good luck!
This did work, but it is making the menu options appear at different heights on header rather than a straight line:
Is there a way I can fix that? Thank you for the help!
I used this code and my menu now looks like this is there a fix for this the drop down is below the rest of the items