Refresh Theme How to click the first leavel of menu Item

[HS--]

I currently have a three level menu and only the deepest level is clickable. I looked through the community for solutions and did not find the code they mentioned in the header.liquid file.

[Xipirons]

Hi,

Which theme are you using ?

[HS--]

Refresh

[Xipirons]

Try this :

For the top-level menu items, you need to modify the header-dropdown-menu.liquid file:

1. From your Shopify admin, go to Online Store > Themes

2. Find your Refresh theme, click the "..." button and select "Edit code"

3. Open the file snippets/header-dropdown-menu.liquid

4. Look for a code block that looks like this:

<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 with this code:

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

For the second-level menu items, you need to modify the header.liquid file:

1. In the theme editor, open the header.liquid file

2. Find the section with the "header__menu-item" class

3. Look for code similar to:

<span {%- if link.child_active %} class="header__active-menu-item"{% endif %}>
  {{ link.title | escape }}
</span>

1. Replace it with this code (or similar code):

<span {%- if link.child_active %} class="header__active-menu-item"{% endif %}>
  <a href="{{ link.url }}" style="color: rgb(var(--color-foreground));text-decoration: none;">
    {{ link.title | escape }}
  </a>
</span>

Here, we are wrapping the {{ link.title | escape }} within an <a href="{{ link.url }}"> tag inside the <span> element. Inline styles are added to maintain the text color and remove text decoration.