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

Store Design
, ,
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?

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.
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!

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.

7

The code did not work :((