Make parent link clickable

1. Snippets > header-mega-menu.liquid (l.19-25)

Parentlink

{%- assign parentlink = link.links[0] -%}

<a href="{{ parentlink.url }}" title="{{ parentlink.title }}">

  <span

    {%- if link.child_active %}

      class="header__active-menu-item"

    {% endif %}

  >

    {{- link.title | escape -}}

  </span>

</a>

1. Snippets > header-drawer.liquid
   

Childlink

{%- assign childlink = childlink.links[0] -%}

<a href="{{ childlink.url }}" title="{{ childlink.title }}" style="text-decoration:none !important; color: rgba(var(--color-foreground), 0.75);">

  <span

    {%- if link.grandchild_active %} 

      class="menu-drawer__menu-item--active"

    {%- endif %}

  >

    {{ childlink.title | escape }}

  </span>

</a>

1. Snippets > header-drawer.liquid

{% comment %}

  Renders a header drawer menu for mobile and desktop.

  Usage:

  {% render 'header-drawer' %}

{% endcomment %}

<header-drawer data-breakpoint="{% if section.settings.menu_type_desktop == 'drawer' %}desktop{% else %}tablet{% endif %}">

  <details id="Details-menu-drawer-container" class="menu-drawer-container">

    <summary

      class="header__icon header__icon--menu header__icon--summary link focus-inset"

      aria-label="{{ 'sections.header.menu' | t }}"

    >

      <span>

        {% render 'icon-hamburger' %}

        {% render 'icon-close' %}

      </span>

    </summary>

    <div id="menu-drawer" class="gradient menu-drawer motion-reduce color-{{ section.settings.menu_color_scheme }}">

      <div class="menu-drawer__inner-container">

        <div class="menu-drawer__navigation-container">

          <nav class="menu-drawer__navigation">

            <ul class="menu-drawer__menu has-submenu list-menu" role="list">

              {%- for link in section.settings.menu.links -%}

                <li>

                  {%- if link.links != blank -%}

                    <details id="Details-menu-drawer-menu-item-{{ forloop.index }}">

                      <summary

                        id="HeaderDrawer-{{ link.handle }}"

                        class="menu-drawer__menu-item list-menu__item link link--text focus-inset"

                        >

                       {%- assign parentlink = link.links[0] -%}

                       <a href="{{ parentlink.url }}" title="{{ parentlink.title }}" 

                       style="text-decoration:none !important; color: rgba(var(--color-foreground), 0.75);">       

                       <span

                        {%- if link.child_active %} 

                          class="menu-drawer__menu-item--active"

                          {% endif %}

                      >

                        {{ link.title | escape }}

                    </span>

                     </a>

    

                        {% render 'icon-arrow' %}

                        {% render 'icon-caret' %}

                      </summary>

                      <div

                        id="link-{{ link.handle | escape }}"

                        class="menu-drawer__submenu has-submenu gradient motion-reduce"

                        tabindex="-1"

                      >

                        <div class="menu-drawer__inner-submenu">

                          <button class="menu-drawer__close-button link link--text focus-inset" aria-expanded="true">

                            {% render 'icon-arrow' %}

                            {{ link.title | escape }}

                          </button>

                          <ul class="menu-drawer__menu list-menu" role="list" tabindex="-1">

                          

                            {%- for childlink in link.links -%}

                              <li>

                                {%- if childlink.links == blank -%}

                                  <a

                                    id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"

                                    href="{{ childlink.url }}"

                                    class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if childlink.current %} menu-drawer__menu-item--active{% endif %}"

                                    {% if childlink.current %}

                                      aria-current="page"

                                    {% endif %}

                                  >

                                    {{ childlink.title | escape }}

                                  </a>

                                {%- else -%}

                                  <details id="Details-menu-drawer-{{ link.handle }}-{{ childlink.handle }}">

                                    <summary

                                      id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"

                                      class="menu-drawer__menu-item link link--text list-menu__item focus-inset"

                                    >        

                            {%- assign childlink = childlink.links[0] -%}

<a href="{{ childlink.url }}" title="{{ childlink.title }}" style="text-decoration:none !important; color: rgba(var(--color-foreground), 0.75);">

  <span

    {%- if link.grandchild_active %} 

      class="menu-drawer__menu-item--active"

    {%- endif %}

  >

    {{ childlink.title | escape }}

  </span>

</a>

                                      {% render 'icon-arrow' %}

                                      {% render 'icon-caret' %}

                                    </summary>

                                    <div

                                      id="childlink-{{ childlink.handle | escape }}"

                                      class="menu-drawer__submenu has-submenu gradient motion-reduce"

                                    >

                                      <button

                                        class="menu-drawer__close-button link link--text focus-inset"

                                        aria-expanded="true"

                                      >

                                        {% render 'icon-arrow' %}

                                        {{ childlink.title | escape }}

                                      </button>

                                      <ul

                                        class="menu-drawer__menu list-menu"

                                        role="list"

                                        tabindex="-1"

                                      >

                                        {%- for grandchildlink in childlink.links -%}

                                          

                                          <li>

                                            <a

                                              id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"

                                              href="{{ grandchildlink.url }}"

                                              class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if grandchildlink.current %} menu-drawer__menu-item--active{% endif %}"

                                              {% if grandchildlink.current %}

                                                aria-current="page"

                                              {% endif %}

                                            >

                                              {{ grandchildlink.title | escape }}

                                            </a>

                                          </li>

                                        {%- endfor -%}

                                      </ul>

                                    </div>

                                  </details>

                                {%- endif -%}

                              </li>

                            {%- endfor -%}

                          </ul>

                        </div>

                      </div>

                    </details>

                  {%- else -%}

                    <a

                      id="HeaderDrawer-{{ link.handle }}"

                      href="{{ link.url }}"

                      class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.current %} menu-drawer__menu-item--active{% endif %}"

                      {% if link.current %}

                        aria-current="page"

                      {% endif %}

                    >

                      {{ link.title | escape }}

                    </a>

                  {%- endif -%}

                </li>

              {%- endfor -%}

            </ul>

          </nav>

          <div class="menu-drawer__utility-links">

            {%- if shop.customer_accounts_enabled -%}

              <a

                href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}"

                class="menu-drawer__account link focus-inset h5 medium-hide large-up-hide"

              >

                {%- if section.settings.enable_customer_avatar -%}

                  <account-icon>

                    {%- if customer and customer.has_avatar? -%}

                      {{ customer | avatar }}

                    {%- else -%}

                      {% render 'icon-account' %}

                    {%- endif -%}

                  </account-icon>

                {%- else -%}

                  {% render 'icon-account' %}

                {%- endif -%}

                {%- liquid

                  if customer

                    echo 'customer.account_fallback' | t

                  else

                    echo 'customer.log_in' | t

                  endif

                -%}

              </a>

            {%- endif -%}

            {%- if localization.available_countries or localization.available_languages -%}

              <div class="menu-drawer__localization header-localization">

                {%- if localization.available_countries and localization.available_countries.size > 1 -%}

                  <localization-form>

                    {%- form 'localization', id: 'HeaderCountryMobileForm', class: 'localization-form' -%}

                      <div>

                        <h2 class="visually-hidden" id="HeaderCountryMobileLabel">

                          {{ 'localization.country_label' | t }}

                        </h2>

                        {%- render 'country-localization', localPosition: 'HeaderCountryMobile' -%}

                      </div>

                    {%- endform -%}

                  </localization-form>

                {% endif %}

                {%- if localization.available_languages and localization.available_languages.size > 1 -%}

                  <localization-form>

                    {%- form 'localization', id: 'HeaderLanguageMobileForm', class: 'localization-form' -%}

                      <div>

                        <h2 class="visually-hidden" id="HeaderLanguageMobileLabel">

                          {{ 'localization.language_label' | t }}

                        </h2>

                        {%- render 'language-localization', localPosition: 'HeaderLanguageMobile' -%}

                      </div>

                    {%- endform -%}

                  </localization-form>

                {%- endif -%}

              </div>

            {%- endif -%}

            <ul class="list list-social list-unstyled" role="list">

              {%- if settings.social_twitter_link != blank -%}

                <li class="list-social__item">

                  <a href="{{ settings.social_twitter_link }}" class="list-social__link link">

                    {%- render 'icon-twitter' -%}

                    <span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>

                  </a>

                </li>

              {%- endif -%}

              {%- if settings.social_facebook_link != blank -%}

                <li class="list-social__item">

                  <a href="{{ settings.social_facebook_link }}" class="list-social__link link">

                    {%- render 'icon-facebook' -%}

                    <span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>

                  </a>

                </li>

              {%- endif -%}

              {%- if settings.social_pinterest_link != blank -%}

                <li class="list-social__item">

                  <a href="{{ settings.social_pinterest_link }}" class="list-social__link link">

                    {%- render 'icon-pinterest' -%}

                    <span class="visually-hidden">{{ 'general.social.links.pinterest' | t }}</span>

                  </a>

                </li>

              {%- endif -%}

              {%- if settings.social_instagram_link != blank -%}

                <li class="list-social__item">

                  <a href="{{ settings.social_instagram_link }}" class="list-social__link link">

                    {%- render 'icon-instagram' -%}

                    <span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>

                  </a>

                </li>

              {%- endif -%}

              {%- if settings.social_tiktok_link != blank -%}

                <li class="list-social__item">

                  <a href="{{ settings.social_tiktok_link }}" class="list-social__link link">

                    {%- render 'icon-tiktok' -%}

                    <span class="visually-hidden">{{ 'general.social.links.tiktok' | t }}</span>

                  </a>

                </li>

              {%- endif -%}

              {%- if settings.social_tumblr_link != blank -%}

                <li class="list-social__item">

                  <a href="{{ settings.social_tumblr_link }}" class="list-social__link link">

                    {%- render 'icon-tumblr' -%}

                    <span class="visually-hidden">{{ 'general.social.links.tumblr' | t }}</span>

                  </a>

                </li>

              {%- endif -%}

              {%- if settings.social_snapchat_link != blank -%}

                <li class="list-social__item">

                  <a href="{{ settings.social_snapchat_link }}" class="list-social__link link">

                    {%- render 'icon-snapchat' -%}

                    <span class="visually-hidden">{{ 'general.social.links.snapchat' | t }}</span>

                  </a>

                </li>

              {%- endif -%}

              {%- if settings.social_youtube_link != blank -%}

                <li class="list-social__item">

                  <a href="{{ settings.social_youtube_link }}" class="list-social__link link">

                    {%- render 'icon-youtube' -%}

                    <span class="visually-hidden">{{ 'general.social.links.youtube' | t }}</span>

                  </a>

                </li>

              {%- endif -%}

              {%- if settings.social_vimeo_link != blank -%}

                <li class="list-social__item">

                  <a href="{{ settings.social_vimeo_link }}" class="list-social__link link">

                    {%- render 'icon-vimeo' -%}

                    <span class="visually-hidden">{{ 'general.social.links.vimeo' | t }}</span>

                  </a>

                </li>

              {%- endif -%}

            </ul>

          </div>

        </div>

      </div>

    </div>

  </details>

</header-drawer>

• Related Articles

• Reduce menu link padding in the footer

  In the footer section, add the following in the custom css: .list-menu__item--link { padding: 0px; }

• Hide menu link in mega menu when product counts = 0

  In header-mega-menu.liquid, search {%- for childlink in link.links -%} Add the following below: {%- if childlink.object and childlink.object.products_count == 0 -%} {%- continue -%} {%- endif -%} Then, search {%- for grandchildlink in childlink.links ...

• Make mega menu show only collection that consist of products

  In header-mega-menu.liquid and header-drawer.liquid, add the followings: {%- if childlink.object and childlink.object.products_count == 0 -%} {%- continue -%} {%- endif -%} and {%- if grandchildlink.object and grandchildlink.object.products_count == ...

• Make submenu without child horizontal

  In the header, add in the following custom css: @media only screen and (min-width: 995px) { .mega-menu__list--condensed { display: flex !important; flex-wrap: wrap; } }

• Make multirow section full width

  In the multi row section, add the following in the custom css: .multirow .multirow__inner { max-width: 100% !important; padding: 0px !important; }