Make Parent Menu Item Clickable (Dropdown & Mega Menu) – Desktop & Mobile [Dawn Theme]

Shopify Liquid July 23, 2026

For Desktop:

—————-

To make parent menu items clickable, first of all check if there is a mega menu or simple dropdown menu. If there is mega menu then make these below changes in these 2 files in theme:

  1. header-mega-menu.liquid
  2. Header-dropdown-menu.liquid

And if there is only dropdown menu then make these changes in “Header-dropdown-menu.liquid” file

So Here are the steps:

  1. Go to Online store > themes > Actions > Edit code > Header-dropdown-menu.liquid
  2. Replace this code:

(A- Replace/Delete/Comment)

<span
  {%- if link.child_active -%}
    class="header__active-menu-item"
  {%- endif -%}
>
  {{- link.title | escape -}}
</span>
With this 👇
(A- Add it)
<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>
3- After that replace this code within same file:
(B- Replace/Delete/Comment)
<span>{{ childlink.title | escape }}</span>
With this 👇
(B- Add it)
<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>

Please note if there is a mega menu repeat these steps for “header-mega-menu.liquid” too.

For Mobile:

————–

  1. Go to header-drawer.liquid
  2. Replace this code

(A- Replace/Delete/Comment)

<details id="Details-menu-drawer-menu-item-{{ forloop.index }}">
  <summary
    id="HeaderDrawer-{{ link.handle }}"
    class="menu-drawer__menu-item list-menu__item link link--text focus-inset
      {% if link.child_active %} menu-drawer__menu-item--active{% endif %}"
  >
    {{ link.title | escape }}
With this 👇
(A- Add it)
<details id="Details-menu-drawer-menu-item-{{ forloop.index }}">
  <summary
    id="HeaderDrawer-{{ link.handle }}"
    class="menu-drawer__menu-item list-menu__item link link--text focus-inset
      {% if link.child_active %} menu-drawer__menu-item--active{% endif %}"
  >
    <a href="{{ link.url }}" class="menu-drawer__menu-item link--text">{{ link.title | escape }}</a>
You can see that in both codes only last line is changed other code is remained same. But I have listed bigger code so you can change the below line at correct place e.g: We have to replace {{ link.title | escape }}

With

<a href="{{ link.url }}" class="menu-drawer__menu-item link--text">{{ link.title | escape }}</a>

Hurrah – Done