How To Make The Top Level Navigation Menu Clickable In Shopify - Dawn Template

Store Design
, ,

Topic summary

Making top-level parent menu items in Shopify’s Dawn theme clickable when they have dropdowns.

Proposed fixes:

  • Older guidance: edit header.liquid or navigation.liquid, find the main-menu loop and dropdown condition, and ensure the anchor around link.title has an href to link.url.
  • Working approach for newer Dawn: edit header-dropdown-menu.liquid, find {{- link.title | escape -}}, and wrap it with an anchor pointing to link.url; optional inline CSS can preserve original styling.

Feedback and results:

  • Confirmed to work on desktop/laptop for at least one user, with styling tweaks if needed.
  • Not working on mobile for at least one user; question raised about enabling the same behavior on mobile.
  • Another user reported the code did not work; one user expressed thanks for the clarity.

Notes:

  • Code edits are central to understanding and implementing the solution; file locations and theme version matter (Dawn has moved the relevant markup to header-dropdown-menu.liquid).

Status/open points:

  • No confirmed mobile solution provided yet.
  • Inconsistent results suggest theme version differences; further guidance or version-specific steps may be needed. The discussion remains open.
Summarized with AI on December 15. AI used: gpt-5.
1

I am using the Dawn template on my website https://www.kingsgardenandleisure.co.uk/ and want to make the top-level navigation menu clickable when they have a drop down- does anyone have any idea how to do that?

1 Like
2
  1. Open the “header.liquid” or “navigation.liquid” file and search for the code that generates the navigation menu. It usually starts with something like {% for link in linklists.main-menu.links %}.
  2. Look for the line of code that generates the dropdown menu. It should have something like {% if link.links.size > 0 %} or {% if link.links.size > 1 %}.
  3. Within the code block that generates the dropdown, find the anchor tag (<a>) that wraps the dropdown label. It will typically be around the line that includes {{ link.title }}.
  4. Add the href="{{ link.url }}" attribute to the anchor tag. This will make the top-level menu item clickable, taking users to the URL specified for that menu item.
1 Like
3

Same question! Could you direct me on where to go to open the “header.liquid” or “navigation.liquid” file?

4

After searching almost everywhere for this for a code which actually worked, I done some digging and managed to find where it was moved to.

Not sure if this is the best way to do it or not, but managed to get it to work so thought I would share.

Go to Online store > (…) > Edit code

Search and open: header-dropdown-menu.liquid

Use “CMD/CTRL + F” to find: {{- link.title | escape -}}

Before this text, add:

After the same text, add:

Depending on your theme colours that should work ok, but to style mine to match the other menu links I needed to add in-line CSS (so it wasn’t following the standard link styles for the theme).

So I added the below within the tag, before the “>”:

style=“color: white; text-decoration: none;”

This worked and now looks like nothing changed from how the menu originally looked before (but has the dropdown arrow). I would however recommend to still have a “View All” somewhere (as not everyone clicks the main link if there is an arrow).

My final code between the 's (for {{- link.title | escape -}}) was like so:

<span
{%- if link.child_active %}
class=“header__active-menu-item”
{% endif %}>


{{- link.title | escape -}}

Hope this helps!

1 Like
5

Hi, it does works on laptop but not for mobile. Is it possible to make it work for mobile web? thank you

6

Thank you SO much for this, you couldn’t have explained it more clearly.

1 Like
7

The code did not work :((