Make Parent Menu Items Clickable in Shopify Dawn Theme

If you have recently implemented a hoverable dropdown menu on your Shopify Dawn theme, you may have noticed a side effect: the parent menu items (the top-level links) are no longer clickable for navigation. Instead, clicking them simply toggles the dropdown menu.

In this tutorial, we will fix this issue. We will modify the code to ensure that clicking the main menu bar links—and the sub-menu links—navigates the user to the correct page, while maintaining the hover functionality.

Prerequisites

Important: This tutorial assumes you have already implemented the hoverable dropdown modification. If you have not done this yet, please complete that tutorial first. If you skip this step and apply the code below, you may break the click function and lose access to your menu dropdowns entirely.

Step 1: Duplicate Your Theme

Before editing any code, always create a backup of your current theme.

1. Go to your Shopify Admin > Online Store > Themes.
2. Click the Actions (three dots) button on your live theme.
3. Select Duplicate.

This ensures you can easily revert changes if anything goes wrong.

Step 2: Open the Code Editor

1. On your duplicated theme, click Actions > Edit code.
2. In the search bar, type header.
3. Under the Sections folder, locate and open header.liquid.

This file controls the navigation bar for both mobile and desktop versions of your site.

Step 3: Modify Desktop Menu Items

We need to locate the code responsible for the desktop header menu.

1. Scroll down to approximately line 351 (line numbers may vary slightly depending on your theme version).
2. Look for the logic handling the desktop menu items. You are looking for a <span> element that renders the menu title (e.g., "Catalog").

We are going to wrap this title in a standard HTML anchor (<a>) tag to make it a link.

The Code Change

Locate the <span> element containing the menu title. Wrap it with an <a> tag using the following logic:

<a href="{{ link.url }}" style="color: inherit; {% unless link.child_active or link.active %}text-decoration: none;{% endunless %}">
  <!-- Your existing span or icon code goes here -->
</a>

What this code does:

• href="{{ link.url }}": Dynamically pulls the URL associated with that menu item from your Shopify navigation settings.
• color: inherit;: Ensures the link doesn't turn the default browser "link blue" or "visited purple," but instead inherits your theme's header color.
• Liquid Logic (unless ...): This logic prevents the text from being underlined by default. It will only underline the text if you are currently on that page (link.active) or one of its child pages (link.child_active).

Step 4: Modify Child (Sub-Menu) Items

Next, we need to apply similar logic to the sub-menu items to ensure they link correctly and maintain proper styling.

1. Scroll down further to approximately line 363.
2. Locate the code for the child links (nested items).
3. You will perform a similar wrap using the anchor tag, but we need to adjust the Liquid objects to reference the child link instead of the parent link.

The Code Change

Wrap the child item text in an <a> tag as follows:

<a href="{{ childlink.url }}" style="color: inherit; {% unless childlink.child_active or childlink.active %}text-decoration: none;{% endunless %}">
  <!-- Your existing child link text/summary goes here -->
</a>

Key Differences:

• We use href="{{ childlink.url }}" instead of link.url.
• We update the active check logic to look at childlink.active.

Step 5: Save and Test

1. Click Save in the top right corner of the code editor.
2. Open your store in a new tab.
3. Refresh the page.

Verification Checklist:

• Hover over the menu items; the dropdown should still appear.
• Click the Top-Level menu item (e.g., "Catalog"). It should now take you to that collection page.
• Click a Sub-Menu item. It should navigate correctly.
• Check the styling: Links should not look like default blue/purple links. They should only be underlined if you are currently on that specific page.

Conclusion

By adding these specific anchor tags and styling logic, you have successfully combined hover functionality with clickable parent links. This creates a more intuitive navigation experience for desktop users on your Shopify store.

If you found this technical guide helpful, please verify your navigation settings to ensure every link is pointing to the correct destination.