How to make all parent menu items clickable (Dawn 15.4)

[DRAWandCARE]

I deleted it because it wasn’t working, but I’ve added it back now.

[Parampreet]

The code is still not there.

[DRAWandCARE]

[topnewyork]

Hi @DRAWandCARE,
Step 1: Edit Your Theme Code

1. From your Shopify admin, go to Online Store > Themes.
2. Find your Dawn theme, click the three dots (…), and select Edit code.

Step 2: Create a New JavaScript File

1. In the code editor, look for the Assets folder on the left-hand side.
2. Click on Add a new asset.
3. A pop-up will appear. Select Create a blank file.
4. Name the file custom-menu.js and click Done. Make sure the .js extension is selected.

Step 3: Add the Custom JavaScript Code

1. Open the newly created custom-menu.js file.
2. Copy the code below and paste it into the file:

document.addEventListener('DOMContentLoaded', function() {
  const menuItems = document.querySelectorAll('.header__menu-item');

  menuItems.forEach(item => {
    const link = item.querySelector('a');
    const summary = item.querySelector('summary');

    if (link && summary && link.href !== '#' && link.href !== window.location.href + '#') {
      // Find the actual link element within the summary
      const summaryLink = summary.querySelector('a, span');

      if (summaryLink) {
        const newLink = document.createElement('a');
        newLink.href = link.href;
        newLink.textContent = summaryLink.textContent;
        newLink.classList.add('header__menu-item--parent');

        // Copy any existing classes from the original summary link/span
        summaryLink.classList.forEach(cls => newLink.classList.add(cls));

        summary.replaceChild(newLink, summaryLink);
      }
    }
  });
});

Save the file.

1. Now, Open the theme.liquid file,.
2. Scroll down to the bottom of the theme.liquid file until you find the closing tag.
3. Just before the tag, add the following line of code:

<script src="{{ 'custom-menu.js' | asset_url }}" defer="defer"></script>

Save the theme.liquid file.
That’s it! The parent items in your navigation menu should now be clickable and take users to the specified collection page.

Thank You!

[DRAWandCARE]

Hi, thank you so much for your reply! I followed all the steps, but unfortunately it still doesn’t work for me. Maybe I did something wrong?

[DRAWandCARE]

I have this code for opening a submenu when hovering over the parent item. Could this cause a conflict?

<script>
  let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
  console.log(items)
  items.forEach(item => {
    item.addEventListener("mouseover", () => {
      item.setAttribute("open", true);
      item.querySelector("ul").addEventListener("mouseleave", () => {
        item.removeAttribute("open");
      });
    item.addEventListener("mouseleave", () => {
      item.removeAttribute("open");
    });
  });
  
  });
</script>

[DRAWandCARE]

I also have this code for opening a submenu when hovering over the parent item. Could this cause a conflict?

<script>
  let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
  console.log(items)
  items.forEach(item => {
    item.addEventListener("mouseover", () => {
      item.setAttribute("open", true);
      item.querySelector("ul").addEventListener("mouseleave", () => {
        item.removeAttribute("open");
      });
    item.addEventListener("mouseleave", () => {
      item.removeAttribute("open");
    });
  });
  
  });
</script>

[Parampreet]

Yes, that might be the reason behind cod is not working at your end. I have implemented the same code on my setup and it is working fine for me.

[DRAWandCARE]

I just tried creating a duplicate of my Dawn theme, and it worked!
I have just one more issue: when a menu item is clicked, it redirects to the first submenu instead of the main collection link in the navigation. Could we please fix that?

<script>
(function waitForMenu() {
  const menu = document.querySelector("nav.header__inline-menu");
  if (!menu) {
    // Menu not yet in DOM, try again in 100ms
    setTimeout(waitForMenu, 100);
    return;
  }

  // Menu exists, attach click handlers
  document.querySelectorAll("nav.header__inline-menu details").forEach(details => {
    const summary = details.querySelector("summary");
    const parentLink = details.querySelector("a"); 

    if (!summary || !parentLink) return;

    summary.addEventListener("click", e => {
      // Allow arrow/caret toggle
      if (e.target.closest("svg")) return;

      // Redirect to parent link
      window.location.href = parentLink.href;
    });
  });
})();
</script>

[DRAWandCARE]

It should be like that if possible!

Thank you SO MUCH!

[Parampreet]

Great, Please make the following changes in header-dropdown-menu.liquid, if there is no custom code then it should be line no 19

[Parampreet]

Find below

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

Replace with this:

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

here I added within the span.

[DRAWandCARE]

Amazing, it worked!

Almost there – and (hopefully) my last question: could you help me remove the link-like decoration and the color change for them?

[Parampreet]

add below css:

.list-menu a {
    text-decoration: none !important;
    color: rgba(var(--color-foreground), .75);
}

.list-menu a:hover {
    text-decoration: none !important;
    color: rgba(var(--color-foreground), .75);
}

[DRAWandCARE]

Thank you SO MUCH for all your help and patience, I really appreciate it! Everything’s working perfectly now

[Parampreet]

Please mark the answer as solution so that others can find it.