Dawn Parent Menu Item Clickable - FINALLY SOLVED!

[cmag]

I'm posting this to help the countless others who (also) undoubtedly spent hours and failed attempts trying to make the parent menu items in Dawn Theme (currently 14.0) clickable when child menu items are active.

It's important to note this solution makes the parent menu clickable WITHOUT changing the coloring and styling. (see more below*)

For the record --- it should NOT be this complicated to make a CORE FUNCTION work. I'm hoping the Shopify Team sees this and applies the fix to the Dawn and other Shopify themes. Because if not, then every time there is a new theme update, us users will have to manually go back in and re-add this code. 😒

The fix is in two parts --- desktop and mobile:

@Kani is the lifesaver behind the desktop part. See their original solution here to copy the code.

Many people think this solution doesn't work because the instructions are for an outdated file name.

The key is to replace the code in both of the following files for Dawn 14.0: 

1. header-mega-menu.liquid

2. header-dropdown-menu.liquid

The next part is fixing it for mobile:

For that, @LitCommerce gave the solution in this post here.

The key for using their code is to apply in the header-drawer.liquid file for Dawn 14.0. 

And that's it! I hope this helps some people. I know it would have saved me HOURS trying outdated and problematic solutions. Their code is great, you just have to put it in the right files for 2024!

❤️Cmag

----

*Before I found the above answers, I had tried so many other solutions posted throughout this forum. One made the menu item linkable (yay!) but changed the link colors to blue and purple (boooo!). Then I found another solution that fixed the coloring issue (yay!), but ended up affecting ALL the links on my site, not just the menu ones, essentially overriding every custom button and color scheme (boooo!). So trust me when I saw I worked hard to bring the above code-masters to you. 😅

[davidhc]

Wow. I cannot believe I have been fighting with this for the past couple days, and you've posted the solutions here literally yesterday! Thanks so much Cmag.

I can echo everything Cmag has said here. It should NOT be this hard to make this sort of edit. It seems so strange this is not a default feature of the theme, not having it actively makes the themes look out of date. I really hope Shopify see this and make the change needed, unless are they doing this so we all just use premium themes instead?

Cmag, bizarrely mine worked just by doing the first code edit in the first location only. I have also added code to make the mega menu appear when the user hovers over the menus too though, did you do that? I noticed someone in the links you referenced mentioned they 'turned the hover' functionality on, I'm guessing they mean they added the same code I did. As I cannot see anywhere to 'turn' that on either 😅 Again, another element that is crazily not standard core feature set for a menu.

[cmag]

Hey @davidhc - Glad it was helpful!

The header-dropdown-menu.liquid file may only be needed if there is a grandchild menu item, but I could be wrong! (the hours and threads and attempts blurred together so I don't remember!) I'm keeping it in both places just to be safe since I know it works. haha

I do know that the mega-menu alone did not make the parent items work for me on mobile, so I definitely had to add the code for header-drawer.liquid.

[davidhc]

Hi @cmag, oh yes very true, I didn't put the mobile menu code in as I didn't think it was worth it. Just tried it now and will be keeping it as that works nicely too 😄 Thanks again haha

Not looking forward to redoing this next time the theme updates, but maybe, just maybe Shopify will implement this natively!

[Mary-AnneGroble]

Hi, so I am using Dawn Version 15.0.1. Sadly the I can seem to find the code to replace. Please advice with this theme update where to find code and how to make the Parent menu item clickable. Many thanks

[Blondienb1]

Hey there! Had the same issue and asked ChatGPT for help. What he suggested was to wrap the parent menu items in anchor tags (<a>) within the summary tag to make them clickable, and provided CSS to make sure styling remains the same.

I only did it for the drop down menu option. (DAWN theme)

Please make a copy of your template first in case the code does not work after updates in the future.

In the header-dropdown-menu.liquid
Replace:

<summary
  id="HeaderMenu-{{ link.handle }}"
  class="header__menu-item list-menu__item link focus-inset"
>
  <span
    {%- if link.child_active %}
      class="header__active-menu-item"
    {% endif %}
  >
    {{- link.title | escape -}}
  </span>
  {% render 'icon-caret' %}
</summary>

With:

<summary class="header__menu-summary">
  <a
    id="HeaderMenu-{{ link.handle }}"
    href="{{ link.url }}"
    class="header__menu-item list-menu__item link focus-inset"
  >
    <span
      {%- if link.child_active %}
        class="header__active-menu-item"
      {% endif %}
    >
      {{- link.title | escape -}}
    </span>
    {% render 'icon-caret' %}
  </a>
</summary>

  

Then create a new CSS file (or add it to the bottom of your Base.css) and add the following code:

/* Basic styles for the navigation */
.header__inline-menu {
  display: flex;
}

.list-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.list-menu--inline > li {
  position: relative;
  margin-right: 20px;
}

/* Style for the links within the menu */
.header__menu-item, .header__menu-link, .header__menu-summary a {
  text-decoration: none; /* Remove underline */
  color: black; /* Set the desired color */
  padding: 10px;
  display: block; /* Ensure the link takes up the full area */
}

.header__menu-item:hover, .header__menu-link:hover, .header__menu-summary a:hover {
  text-decoration: underline; /* Add underline on hover if needed */
  color: black; /* Ensure hover color matches desired style */
}

/* Ensure the child menus are hidden by default */
.header__submenu {
  display: none;
  position: absolute; /* or any positioning you prefer */
  top: 100%; /* Position below the parent menu item */
  left: 0;
  background-color: white; /* Background color of the dropdown */
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000; /* Ensure it appears above other elements */
}

/* Show the dropdown menu when the details element is open */
details[open] > .header__submenu {
  display: block;
}

.header__submenu .list-menu {
  flex-direction: column;
}

.header__submenu .list-menu__item {
  margin-bottom: 10px;
}

.header__submenu .list-menu__item:last-child {
  margin-bottom: 0;
}

.header__active-menu-item {
  font-weight: bold;
}

I also removed the little arrow next to the parent menu by adding the following code directly on the theme editor Custom CSS

.icon-caret {
  display: none;
}

Hope it helps!

[tarek_guma]

Thanks. It works like a charm!
You make my day! Bravoo!

[imdesigns]

Thanks for this but I'm still not sure what code to put in 

1. header-mega-menu.liquid

2. header-dropdown-menu.liquid

When I click on this link you give I don't see the replacement code or an answer

Are you able to provide what the replacement code is?