How can I replace a click listener with an href in a Dawn template menu?

Store Design
,

Topic summary

Issue: In a Shopify Dawn mega menu, the top-level “Products” item still triggers the menu’s click-to-toggle behavior; the goal is to make it navigate via a standard link (href) to collections, similar to esn.com/en.

Fix: Edit theme code via Online Store > Themes > Edit code, in both header-dropdown-menu.liquid and header-mega-menu.liquid. Around lines 19–25, replace the non-clickable title wrapper ( around {{ link.title }}) with an anchor element that wraps the title: …. This changes the interaction from toggling the menu to navigating to the linked page.

Outcome: The change worked as intended and the mega menu now allows clicking “Products” to navigate. No further issues reported; discussion resolved.

Summarized with AI on January 3. AI used: gpt-5.
1

I’ve created a Mega Menu using the Dawn template and subsequently added code in header.liquid to avoid having to click on my header to expand this menu. Then, I wanted to make it possible to click on “Products” to be led to the collections via an . However, the click listener for the menu still exists, causing it to close and open.

The question is: Where can I find this click listener and subsequently replace it with an href?

As an example, the “Products” tab should function similarly to what is found at https://www.esn.com/en.

2

Hi @Fabi23

Dan here from Ryviu: Product Review & QA app.

You can do that by following this instruction

Go to your Online store > Themes > Edit code > open header-dropdown-menu.liquid and header-mega-menu.liquid files, find those lines of code (from line 19th-25th)

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

Change to this and save the file

                <a class="header__menu-item list-menu__item link link--text focus-inset" href="{{ link.url }}">
                <span
                  {%- if link.child_active %}
                    class="header__active-menu-item"
                  {% endif %}
                >
                  {{- link.title | escape -}}
                </span>
              </a>
3

This works perfectly.

Thank you very much!

1 Like
4

You are very welcome