Dropdown menu clickable - Trade

[lauriannehuggin]

Hello,

I'm trying to make a dropdown menu name clickable, but only the sublinks can be clickable and bring you to a new page. I found answers here but they only seem to work with the Dawn theme, I have the Trade theme.

I'm trying to make the Gifting link cliquable, I set the link in the menu already.

Here is the link to my website:

https://52263b-b3.myshopify.com/

Thank you!

[Emmish]

Hey there! I ran into that same quirk with Trade’s dropdowns—by default it treats any parent menu item purely as a toggle, not a link. Here’s a quick way to bring your “Gifting” link to life:

First, head into your theme’s Customize view and click on your header/navigation section. See if there’s a setting called “Enable parent links” or “Show link on parent items.” Toggling that on should make “Gifting” clickable alongside its dropdown behavior.

If you don’t spot that option, you can tweak the theme’s header script—basically remove the bit that blocks parent-item clicks so your browser follows the URL instead of just opening the submenu. It’s a two-second change in the theme’s JS, and I’d be happy to walk you through editing it safely.

Give the Customize toggle a try first, and let me know if you need the code pointers next. You’ll have “Gifting” driving traffic in no time!

[Shadab_dev]

What ever quirks you tried on the dawn should most probably work in the trade theme as well since they are both Shopify free themes and the code base is pretty much the same. 

What code did you try?

[lauriannehuggin]

I used this website to help: https://websensepro.com/blog/parent-menu-item-clickable-shopify-dawn-theme

I tried it 2 times it didn't work so I brought it back to the original coding to find an answer.

[marcuswebexp]

Hi @lauriannehuggin ,

Please try this solution in the header-mega-menu.liquid file of your theme:

{% comment %}
  Renders a megamenu for the header.

  Usage:
  {% render 'header-mega-menu' %}
{% endcomment %}

<nav class="header__inline-menu">
  <ul class="list-menu list-menu--inline" role="list">
    {%- for link in section.settings.menu.links -%}
      <li>
        {%- if link.links != blank -%}
          <header-menu>
            <details id="Details-HeaderMenu-{{ forloop.index }}" class="mega-menu">
              <summary
                id="HeaderMenu-{{ link.handle }}"
                class="header__menu-item list-menu__item link focus-inset"
              >
                <a href="{{ link.url }}" class="header__menu-item list-menu__item link link--text focus-inset" style="padding: 0 1.2rem;">
                <span
                  {%- if link.child_active %}
                    class="header__active-menu-item"
                  {% endif %}
                >
                  {{- link.title | escape -}}
                </span>
                </a>
                
                {{- 'icon-caret.svg' | inline_asset_content -}}
              </summary>
              <div
                id="MegaMenu-Content-{{ forloop.index }}"
                class="mega-menu__content color-{{ section.settings.menu_color_scheme }} gradient motion-reduce global-settings-popup"
                tabindex="-1"
              >
                <ul
                  class="mega-menu__list page-width{% if link.levels == 1 %} mega-menu__list--condensed{% endif %}"
                  role="list"
                >
                  {%- for childlink in link.links -%}
                    <li>
                      <a
                        id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
                        href="{{ childlink.url }}"
                        class="mega-menu__link mega-menu__link--level-2 link{% if childlink.current %} mega-menu__link--active{% endif %}"
                        {% if childlink.current %}
                          aria-current="page"
                        {% endif %}
                      >
                        {{ childlink.title | escape }}
                      </a>
                      {%- if childlink.links != blank -%}
                        <ul class="list-unstyled" role="list">
                          {%- for grandchildlink in childlink.links -%}
                            <li>
                              <a
                                id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
                                href="{{ grandchildlink.url }}"
                                class="mega-menu__link link{% if grandchildlink.current %} mega-menu__link--active{% endif %}"
                                {% if grandchildlink.current %}
                                  aria-current="page"
                                {% endif %}
                              >
                                {{ grandchildlink.title | escape }}
                              </a>
                            </li>
                          {%- endfor -%}
                        </ul>
                      {%- endif -%}
                    </li>
                  {%- endfor -%}
                </ul>
              </div>
            </details>
          </header-menu>
        {%- else -%}
          <a
            id="HeaderMenu-{{ link.handle }}"
            href="{{ link.url }}"
            class="header__menu-item list-menu__item link link--text focus-inset"
            {% if link.current %}
              aria-current="page"
            {% endif %}
          >
            <span
              {%- if link.current %}
                class="header__active-menu-item"
              {% endif %}
            >
              {{- link.title | escape -}}
            </span>
          </a>
        {%- endif -%}
      </li>
    {%- endfor -%}
  </ul>
</nav>

You can view it here:

https://mwe-test-store-2.myshopify.com/

Password: Password

This isn't a fully-built solution, but will definitely get you close. If you want a more tailored solution, feel free to email or call me using the links in my signature.

If this was useful, a Like or marking it as a Solution is appreciated.

[Shadab_dev · Accepted solution]

I see where the problem is. Check this out.

If you see the header section from the customizer you fill find this setting. Now your menu type is set to mega menu for which it does not take effect. If you change it to dropdown you will see it working. But if you wanna continue using mega menu just follow the same steps the guy showed on header-mega-menu.liquid file.

Hope this helps 
Best
Shadab

[lauriannehuggin]

Yes it worked, thank you!

[Shadab_dev]

Sounds great 👍