How Do I Make The Top Level Link Clickable On The header Menu?

Topic summary

A user seeks to make top-level menu items clickable in their Shopify header navigation when those items have child links (dropdown menus). The theme in use is Craft.

Proposed Solution:
A contributor provides step-by-step instructions:

  • Locate and edit the header-dropdown-menu.liquid file in the theme code editor
  • Find a specific <span> code block that displays the menu title
  • Replace it with an <a> tag that includes href="{{ link.url }}" to make the parent item clickable
  • Save the changes

A video tutorial link is also shared demonstrating the process.

Follow-up Issues:

  • One user reports the solution worked but introduced unwanted styling: parent menu items now appear purple/blue with underlines, unlike child-less menu items
  • Another user states the solution is no longer working

The discussion remains open with unresolved styling inconsistencies and compatibility concerns.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.

Hi @hitesh01 ,

Please follow these steps:

  • Then find the file “header-dropdown-menu.liquid

  • Find the following code:

                <span
                  {%- if link.child_active %}
                    class="header__active-menu-item"
                  {% endif %}
                >
                  {{- link.title | escape -}}
                </span>
  • Replace with the following code:
                <a href="{{ link.url }}"
                  {%- if link.child_active %}
                    class="header__active-menu-item"
                  {% endif %}
                >
                  {{- link.title | escape -}}
                </a>

Hope it helps @hitesh01

1 Like