How To Make Parent Menu Item Clickable [Dawn Theme]

In this tutorial, I’ll show you how to make the parent menu item clickable in Shopify’s Dawn Theme. By default, Shopify’s parent menu items are often non-clickable, which can limit user navigation. I’ll walk you through a simple solution to make the parent items clickable, allowing you to link directly to key pages or collections.

Step 1: Replace code in header-dropdown-menu.liquid

Find the following code:

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

Replace it with the following code

      <a
                  id="HeaderMenu-{{ link.handle }}"
                  class="list-menu__item link--text focus-inset"
                  href="{{ link.url }}" style="text-decoration:none;"
                >
                  <span
                    {%- if link.child_active %}
                      class="header__active-menu-item"
                    {% endif %}
                  >
                    {{- link.title | escape -}}
                  </span>
                </a>

Step 2: Replace code in header-dropdown-menu.liquid

Find the following code:

<span>{{ childlink.title | escape }}</span>

And replace it with following code

<a
                            id="HeaderMenu-{{ link.handle }}"
                            class="list-menu__item link--text focus-inset"
                            href="{{ childlink.url }}"
                            style="text-decoration:none;"
                          >
                            <span>{{ childlink.title | escape }}</span>
                          </a>