Top level links working for desktop, but not on mobile

[rachelgongster]

Hi experts,

I was wondering if you could help me with an issue.

My top-level links for my dropdown menu works on desktop, but it doesn't work on mobile.

E.g. When I click "Shop By Stage" (top level link) on desktop, it correctly leads me to https://mykinchan.com/collections/shop-by-stage, but on mobile, it leads me to the dropdown menu. 

 

It works for mobile, because I followed the advice from a community expert - to change 

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

to

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

And it worked for desktop, but not for mobile. I understand from past threads that mobile's navigation works differently and that the mobile menu developed in such a way that when you click on the main menu then it will open the sub menu. However, I noticed that other shopify stores have been able to overcome this barrier. 

Is there a way for me to enable my top level links to work on mobile?

Thanks in advance!

Rachel

I'm using the Dawn theme for www.mykinchan.com