Nav Bar Buttons Not Working on Desktop Version

[NickWebDev]

Nav Bar buttons are not working on the desktop version of the website and I am unable to debug the particular issue, please guide.

Live  Store Link 

I have tried multiple methods, unable to resolve, please guide.

[dmwwebartisan]

@NickWebDev 

Please share screenshot what do you want!

Thanks!

[NickWebDev]

These particular buttons are not working on desktop site, they are working on the mobile navbar, I am unable to debug. Please let me know what liquid error.

[dmwwebartisan]

@NickWebDev 

Please share your Sections/header.liquid file code 

Thanks!

[dmwwebartisan]

@NickWebDev 

href tag missing desktop version please share your Sections/header.liquid file code .

Thanks!

[NickWebDev]

{%- style -%}
  {%- assign logo_max_width = section.settings.logo_max_width -%}
  {%- assign header_color = section.settings.header_color -%}

  {%- if section.settings.transparent_header_enable and request.page_type == 'index' -%}
    {%- assign header_color_transparent = section.settings.transparent_header_color -%}

    .header-wrapper.header-wrapper--transparent .site-nav__link,
    .header-wrapper.header-wrapper--transparent .site-header__logo a {
      color: {{ header_color_transparent }};
    }

    .header-wrapper.header-wrapper--transparent .site-header__logo a:hover,
    .header-wrapper.header-wrapper--transparent .site-nav__link:hover,
    .header-wrapper.header-wrapper--transparent .site-nav__link:focus,
    .header-wrapper.header-wrapper--transparent .site-header__logo a:focus {
      color: {{ header_color_transparent | color_modify: 'alpha', 0.75 }};
    }

    .header-wrapper.header-wrapper--transparent .site-nav--has-dropdown.nav-hover > .site-nav__link {
      color: {{ header_color }};
    }

    .header-wrapper.header-wrapper--transparent .burger-icon,
    .header-wrapper.header-wrapper--transparent .site-nav__link:hover .burger-icon {
      background: {{ header_color_transparent }};
    }
  {%- endif -%}

  .header-wrapper .site-nav__link,
  .header-wrapper .site-header__logo a,
  .header-wrapper .site-nav__dropdown-link,
  .header-wrapper .site-nav--has-dropdown > a.nav-focus,
  .header-wrapper .site-nav--has-dropdown.nav-hover > a,
  .header-wrapper .site-nav--has-dropdown:hover > a {
    color: {{ header_color }};
  }

  .header-wrapper .site-header__logo a:hover,
  .header-wrapper .site-header__logo a:focus,
  .header-wrapper .site-nav__link:hover,
  .header-wrapper .site-nav__link:focus,
  .header-wrapper .site-nav--has-dropdown a:hover,
  .header-wrapper .site-nav--has-dropdown > a.nav-focus:hover,
  .header-wrapper .site-nav--has-dropdown > a.nav-focus:focus,
  .header-wrapper .site-nav--has-dropdown .site-nav__link:hover,
  .header-wrapper .site-nav--has-dropdown .site-nav__link:focus,
  .header-wrapper .site-nav--has-dropdown.nav-hover > a:hover,
  .header-wrapper .site-nav__dropdown a:focus {
    color: {{ header_color | color_modify: 'alpha', 0.75 }};
  }

  .header-wrapper .burger-icon,
  .header-wrapper .site-nav--has-dropdown:hover > a:before,
  .header-wrapper .site-nav--has-dropdown > a.nav-focus:before,
  .header-wrapper .site-nav--has-dropdown.nav-hover > a:before {
    background: {{ header_color }};
  }

  .header-wrapper .site-nav__link:hover .burger-icon {
    background: {{ header_color | color_modify: 'alpha', 0.75 }};
  }

  .site-header__logo img {
    max-width: {{ logo_max_width | append: 'px' }};
  }

  @media screen and (max-width: 768px) {
    .site-header__logo img {
      max-width: 100%;
    }
  }
{%- endstyle -%}
<div data-section-id="{{ section.id }}" data-section-type="header-section" data-template="{{ request.page_type }}" class="sticky">
  <div id="NavDrawer" class="drawer drawer--left">
    {% include 'drawer-menu' %}
  </div>
  <div class="header-container drawer__header-container ">
    <div class="header-wrapper" data-header-wrapper>
      {% comment %}
      {% if section.settings.show_announcement %}
        {% if section.settings.home_page_only == false or request.page_type == 'index' %}
          <style>
            .announcement-bar {
              background-color: {{ section.settings.color_bg }};
            }

            .announcement-bar--link:hover {
              {% assign brightness = section.settings.color_bg | color_brightness %}

              {% if brightness <= 192 %}
                {% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
                background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }};
              {% else %}
                {% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
                background-color: {{ section.settings.color_bg | color_darken: darkenAmount }};
              {% endif %}
            }

            .announcement-bar__message {
              color: {{ section.settings.color_text }};
            }
          </style>

          {% if section.settings.link == blank %}
            <div class="announcement-bar">
          {% else %}
            <a href="{{ section.settings.link }}" class="announcement-bar announcement-bar--link">
          {% endif %}

            <p class="announcement-bar__message">{{ section.settings.text | escape }}</p>

          {% if section.settings.link == blank %}
            </div>
          {% else %}
            </a>
          {% endif %}

        {% endif %}
      {% endif %}
   {% endcomment %}
      <header class="site-header" role="banner"{% if section.settings.transparent_header_enable %} data-transparent-header="true"{% endif %}>
        <div class="wrapper">
          <div class="grid--full grid--table">
            <div class="grid__item large--hide large--one-sixth one-quarter">
              <div class="site-nav--open site-nav--mobile">
                <button type="button" class="icon-fallback-text site-nav__link site-nav__link--burger js-drawer-open-button-left" aria-controls="NavDrawer">
                  <span class="burger-icon burger-icon--top"></span>
                  <span class="burger-icon burger-icon--mid"></span>
                  <span class="burger-icon burger-icon--bottom"></span>
                  <span class="fallback-text">{{ 'general.drawers.navigation' | t }}</span>
                </button>
              </div>
            </div>
            <div class="grid__item large--one-third medium-down--one-half">
              {% comment %}
                Use the uploaded logo from theme settings if enabled.
                Site name gets precedence with H1 tag on homepage, div on other pages.
              {% endcomment %}
              {% if request.page_type == 'index' %}
                <h1 class="site-header__logo large--left" itemscope itemtype="http://schema.org/Organization">
              {% else %}
                <div class="h1 site-header__logo large--left" itemscope itemtype="http://schema.org/Organization">
              {% endif %}
                {% capture image_size %}{{ logo_max_width | escape }}x{% endcapture %}

                <a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">
                  {% if section.settings.logo %}
                    <img class="site-header__logo-image" src="{{ section.settings.logo | img_url: image_size }}" srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo">

                    {% if request.page_type == 'index' and section.settings.transparent_header_enable %}
                      {% if section.settings.transparent_logo == blank %}
                        {%- assign transparent_logo = section.settings.logo -%}
                      {% else %}
                        {%- assign transparent_logo = section.settings.transparent_logo -%}
                      {% endif %}

                      <img class="site-header__logo-image site-header__logo-image--transparent" src="{{ transparent_logo | img_url: image_size }}" srcset="{{ transparent_logo | img_url: image_size }} 1x, {{ transparent_logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo">
                    {% endif %}
                  {% else %}
                    {{ shop.name }}
                  {% endif %}
                </a>
              {% if request.page_type == 'index' %}
                </h1>
              {% else %}
                </div>
              {% endif %}
            </div>
            <nav class="grid__item large--two-thirds large--text-right medium-down--hide" role="navigation">
              {% comment %}
                List out your main-menu linklist (default)

                More info on linklists:
                  - http://docs.shopify.com/themes/liquid-variables/linklists
              {% endcomment %}
              <!-- begin site-nav -->
              <ul class="site-nav" id="AccessibleNav">
                {% for link in linklists[section.settings.main_menu_link_list].links %}
                  {% if link.links != blank %}
                  {% assign parent_index = forloop.index %}
                    <li
                      class="site-nav__item site-nav--has-dropdown {% if link.active %}site-nav--active{% endif %}"
                      aria-haspopup="true"
                      data-meganav-type="parent">
                      <a
                        href="{{ link.url }}"
                        class="site-nav__link"
                        data-meganav-type="parent"
                        aria-controls="MenuParent-{{ parent_index }}"
                        aria-expanded="false"
                        {% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
                          {{ link.title | escape }}
                          <span class="icon icon-arrow-down" aria-hidden="true"></span>
                      </a>
                      <ul
                        id="MenuParent-{{ parent_index }}"
                        class="site-nav__dropdown {% if link.levels == 2 %}site-nav--has-grandchildren{% endif %}"
                        data-meganav-dropdown>
                        {% for childlink in link.links %}
                          {% if childlink.links != blank %}
                          {% assign child_index = forloop.index %}
                            <li
                              class="site-nav__item site-nav--has-dropdown site-nav--has-dropdown-grandchild {% if childlink.active %}site-nav--active{% endif %}"
                              aria-haspopup="true">
                              <a
                                href="{{ childlink.url }}"
                                class="site-nav__dropdown-link"
                                aria-controls="MenuChildren-{{ parent_index }}-{{ child_index }}"
                                data-meganav-type="parent"
                                {% unless request.page_type == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%}
                                tabindex="-1">
                                  {{ childlink.title | escape }}
                                  <span class="icon icon-arrow-down" aria-hidden="true"></span>
                              </a>
                              <div class="site-nav__dropdown-grandchild">
                                <ul
                                  id="MenuChildren-{{ parent_index }}-{{ child_index }}"
                                  data-meganav-dropdown>
                                  {% for grandchildlink in childlink.links %}
                                    <li{% if grandchildlink.active %} class="site-nav--active"{% endif %}>
                                      <a
                                        href="{{ grandchildlink.url }}"
                                        class="site-nav__dropdown-link"
                                        data-meganav-type="child"
                                        {% unless request.page_type == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless %}
                                        tabindex="-1">
                                          {{ grandchildlink.title | escape }}
                                        </a>
                                    </li>
                                  {% endfor %}
                                </ul>
                              </div>
                            </li>
                          {% else %}
                            <li{% if childlink.active %} class="site-nav--active"{% endif %}>
                              <a
                                href="{{ childlink.url }}"
                                class="site-nav__dropdown-link"
                                data-meganav-type="child"
                                {% if childlink.active %}aria-current="page"{% endif %}
                                tabindex="-1">
                                  {{ childlink.title | escape }}
                              </a>
                            </li>
                          {% endif %}
                        {% endfor %}
                      </ul>
                    </li>
                  {% else %}
                    <li class="site-nav__item{% if link.active %} site-nav--active{% endif %}">
                      <a
                        class="site-nav__link"
                        data-meganav-type="child"
                        {% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
                          {{ link.title | escape }}
                      </a>
                    </li>
                  {% endif %}
                {% endfor %}

                {% comment %}
                  Remove comment tags below to add a search box to your header, visible on screens where your header menu
                  is displayed inline.
                  <li class="site-nav__item site-nav--search__bar medium-down--hide">
                    {% include 'search-bar', search_btn_style: 'btn', search_bar_location: 'search-bar--header' %}
                  </li>
                {% endcomment %}
                {% if shop.customer_accounts_enabled %}
                  <li class="site-nav__item site-nav__expanded-item site-nav__item--compressed">
                    <a class="site-nav__link site-nav__link--icon" href="{{ routes.account_url }}">
                      <span class="icon-fallback-text">
                        <span class="icon icon-customer" aria-hidden="true"></span>
                        <span class="fallback-text">
                          {% if customer %}
                            {{ 'layout.customer.account' | t }}
                          {% else %}
                            {{ 'layout.customer.log_in' | t }}
                          {% endif %}
                        </span>
                      </span>
                    </a>
                  </li>
                {% endif %}

                {% if section.settings.search == 'page' or section.settings.search == 'modal' %}
                  {% assign search_modal = true %}
                  {% if section.settings.search == 'page' %}
                    {% assign search_modal = false %}
                  {% endif %}
                  <li class="site-nav__item site-nav__item--compressed">
                    <a class="site-nav__link site-nav__link--icon{% if search_modal %} js-toggle-search-modal{% endif %}" data-mfp-src="#SearchModal">
                      <span class="icon-fallback-text">
                        <span class="icon icon-search" aria-hidden="true"></span>
                        <span class="fallback-text">{{ 'general.search.title' | t }}</span>
                      </span>
                    </a>
                  </li>
                {% endif %}

                <li class="site-nav__item site-nav__item--compressed">
                  <a href="{{ routes.cart_url }}" class="site-nav__link site-nav__link--icon cart-link js-drawer-open-button-right" aria-controls="CartDrawer">
                    <span class="icon-fallback-text">
                      <span class="icon icon-cart" aria-hidden="true"></span>
                      <span class="fallback-text">{{ 'layout.cart.title' | t }}</span>
                    </span>
                    <span class="cart-link__bubble{% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}"></span>
                  </a>
                </li>

              </ul>
              <!-- //site-nav -->
            </nav>
            <div class="grid__item large--hide one-quarter custom-quarter">
              <div class="site-nav--mobile text-right">
                {% if section.settings.search == 'page' or section.settings.search == 'modal' %}
                  {% assign search_modal = true %}
                  {% if section.settings.search == 'page' %}
                    {% assign search_modal = false %}
                  {% endif %}
                  <li class="site-nav__item site-nav__item--compressed">
                    <a class="site-nav__link site-nav__link--icon{% if search_modal %} js-toggle-search-modal{% endif %}" data-mfp-src="#SearchModal">
                      <span class="icon-fallback-text">
                        <span class="icon icon-search custom-icon-search" aria-hidden="true"></span>
                        <span class="fallback-text">{{ 'general.search.title' | t }}</span>
                      </span>
                    </a>
                  </li>
                {% endif %}
                <a href="{{ routes.cart_url }}" class="site-nav__link cart-link js-drawer-open-button-right custom-cart-icon" aria-controls="CartDrawer">
                  <span class="icon-fallback-text">
                    <span class="icon icon-cart" aria-hidden="true"></span>
                    <span class="fallback-text">{{ 'layout.cart.title' | t }}</span>
                  </span>
                  <span class="cart-link__bubble{% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}"></span>
                </a>
              </div>
            </div>
          </div>

        </div>
      </header>
    </div>
  </div>
</div>

[dmwwebartisan · Accepted solution]

@NickWebDev 

Please replace this code 

{%- style -%}
  {%- assign logo_max_width = section.settings.logo_max_width -%}
  {%- assign header_color = section.settings.header_color -%}

  {%- if section.settings.transparent_header_enable and request.page_type == 'index' -%}
    {%- assign header_color_transparent = section.settings.transparent_header_color -%}

    .header-wrapper.header-wrapper--transparent .site-nav__link,
    .header-wrapper.header-wrapper--transparent .site-header__logo a {
      color: {{ header_color_transparent }};
    }

    .header-wrapper.header-wrapper--transparent .site-header__logo a:hover,
    .header-wrapper.header-wrapper--transparent .site-nav__link:hover,
    .header-wrapper.header-wrapper--transparent .site-nav__link:focus,
    .header-wrapper.header-wrapper--transparent .site-header__logo a:focus {
      color: {{ header_color_transparent | color_modify: 'alpha', 0.75 }};
    }

    .header-wrapper.header-wrapper--transparent .site-nav--has-dropdown.nav-hover > .site-nav__link {
      color: {{ header_color }};
    }

    .header-wrapper.header-wrapper--transparent .burger-icon,
    .header-wrapper.header-wrapper--transparent .site-nav__link:hover .burger-icon {
      background: {{ header_color_transparent }};
    }
  {%- endif -%}

  .header-wrapper .site-nav__link,
  .header-wrapper .site-header__logo a,
  .header-wrapper .site-nav__dropdown-link,
  .header-wrapper .site-nav--has-dropdown > a.nav-focus,
  .header-wrapper .site-nav--has-dropdown.nav-hover > a,
  .header-wrapper .site-nav--has-dropdown:hover > a {
    color: {{ header_color }};
  }

  .header-wrapper .site-header__logo a:hover,
  .header-wrapper .site-header__logo a:focus,
  .header-wrapper .site-nav__link:hover,
  .header-wrapper .site-nav__link:focus,
  .header-wrapper .site-nav--has-dropdown a:hover,
  .header-wrapper .site-nav--has-dropdown > a.nav-focus:hover,
  .header-wrapper .site-nav--has-dropdown > a.nav-focus:focus,
  .header-wrapper .site-nav--has-dropdown .site-nav__link:hover,
  .header-wrapper .site-nav--has-dropdown .site-nav__link:focus,
  .header-wrapper .site-nav--has-dropdown.nav-hover > a:hover,
  .header-wrapper .site-nav__dropdown a:focus {
    color: {{ header_color | color_modify: 'alpha', 0.75 }};
  }

  .header-wrapper .burger-icon,
  .header-wrapper .site-nav--has-dropdown:hover > a:before,
  .header-wrapper .site-nav--has-dropdown > a.nav-focus:before,
  .header-wrapper .site-nav--has-dropdown.nav-hover > a:before {
    background: {{ header_color }};
  }

  .header-wrapper .site-nav__link:hover .burger-icon {
    background: {{ header_color | color_modify: 'alpha', 0.75 }};
  }

  .site-header__logo img {
    max-width: {{ logo_max_width | append: 'px' }};
  }

  @media screen and (max-width: 768px) {
    .site-header__logo img {
      max-width: 100%;
    }
  }
{%- endstyle -%}
<div data-section-id="{{ section.id }}" data-section-type="header-section" data-template="{{ request.page_type }}" class="sticky">
  <div id="NavDrawer" class="drawer drawer--left">
    {% include 'drawer-menu' %}
  </div>
  <div class="header-container drawer__header-container ">
    <div class="header-wrapper" data-header-wrapper>
      {% comment %}
      {% if section.settings.show_announcement %}
        {% if section.settings.home_page_only == false or request.page_type == 'index' %}
          <style>
            .announcement-bar {
              background-color: {{ section.settings.color_bg }};
            }

            .announcement-bar--link:hover {
              {% assign brightness = section.settings.color_bg | color_brightness %}

              {% if brightness <= 192 %}
                {% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
                background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }};
              {% else %}
                {% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
                background-color: {{ section.settings.color_bg | color_darken: darkenAmount }};
              {% endif %}
            }

            .announcement-bar__message {
              color: {{ section.settings.color_text }};
            }
          </style>

          {% if section.settings.link == blank %}
            <div class="announcement-bar">
          {% else %}
            <a href="{{ section.settings.link }}" class="announcement-bar announcement-bar--link">
          {% endif %}

            <p class="announcement-bar__message">{{ section.settings.text | escape }}</p>

          {% if section.settings.link == blank %}
            </div>
          {% else %}
            </a>
          {% endif %}

        {% endif %}
      {% endif %}
   {% endcomment %}
      <header class="site-header" role="banner"{% if section.settings.transparent_header_enable %} data-transparent-header="true"{% endif %}>
        <div class="wrapper">
          <div class="grid--full grid--table">
            <div class="grid__item large--hide large--one-sixth one-quarter">
              <div class="site-nav--open site-nav--mobile">
                <button type="button" class="icon-fallback-text site-nav__link site-nav__link--burger js-drawer-open-button-left" aria-controls="NavDrawer">
                  <span class="burger-icon burger-icon--top"></span>
                  <span class="burger-icon burger-icon--mid"></span>
                  <span class="burger-icon burger-icon--bottom"></span>
                  <span class="fallback-text">{{ 'general.drawers.navigation' | t }}</span>
                </button>
              </div>
            </div>
            <div class="grid__item large--one-third medium-down--one-half">
              {% comment %}
                Use the uploaded logo from theme settings if enabled.
                Site name gets precedence with H1 tag on homepage, div on other pages.
              {% endcomment %}
              {% if request.page_type == 'index' %}
                <h1 class="site-header__logo large--left" itemscope itemtype="http://schema.org/Organization">
              {% else %}
                <div class="h1 site-header__logo large--left" itemscope itemtype="http://schema.org/Organization">
              {% endif %}
                {% capture image_size %}{{ logo_max_width | escape }}x{% endcapture %}

                <a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">
                  {% if section.settings.logo %}
                    <img class="site-header__logo-image" src="{{ section.settings.logo | img_url: image_size }}" srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo">

                    {% if request.page_type == 'index' and section.settings.transparent_header_enable %}
                      {% if section.settings.transparent_logo == blank %}
                        {%- assign transparent_logo = section.settings.logo -%}
                      {% else %}
                        {%- assign transparent_logo = section.settings.transparent_logo -%}
                      {% endif %}

                      <img class="site-header__logo-image site-header__logo-image--transparent" src="{{ transparent_logo | img_url: image_size }}" srcset="{{ transparent_logo | img_url: image_size }} 1x, {{ transparent_logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo">
                    {% endif %}
                  {% else %}
                    {{ shop.name }}
                  {% endif %}
                </a>
              {% if request.page_type == 'index' %}
                </h1>
              {% else %}
                </div>
              {% endif %}
            </div>
            <nav class="grid__item large--two-thirds large--text-right medium-down--hide" role="navigation">
              {% comment %}
                List out your main-menu linklist (default)

                More info on linklists:
                  - http://docs.shopify.com/themes/liquid-variables/linklists
              {% endcomment %}
              <!-- begin site-nav -->
              <ul class="site-nav" id="AccessibleNav">
                {% for link in linklists[section.settings.main_menu_link_list].links %}
                  {% if link.links != blank %}
                  {% assign parent_index = forloop.index %}
                    <li
                      class="site-nav__item site-nav--has-dropdown {% if link.active %}site-nav--active{% endif %}"
                      aria-haspopup="true"
                      data-meganav-type="parent">
                      <a
                        href="{{ link.url }}"
                        class="site-nav__link"
                        data-meganav-type="parent"
                        aria-controls="MenuParent-{{ parent_index }}"
                        aria-expanded="false"
                        {% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
                          {{ link.title | escape }}
                          <span class="icon icon-arrow-down" aria-hidden="true"></span>
                      </a>
                      <ul
                        id="MenuParent-{{ parent_index }}"
                        class="site-nav__dropdown {% if link.levels == 2 %}site-nav--has-grandchildren{% endif %}"
                        data-meganav-dropdown>
                        {% for childlink in link.links %}
                          {% if childlink.links != blank %}
                          {% assign child_index = forloop.index %}
                            <li
                              class="site-nav__item site-nav--has-dropdown site-nav--has-dropdown-grandchild {% if childlink.active %}site-nav--active{% endif %}"
                              aria-haspopup="true">
                              <a
                                href="{{ childlink.url }}"
                                class="site-nav__dropdown-link"
                                aria-controls="MenuChildren-{{ parent_index }}-{{ child_index }}"
                                data-meganav-type="parent"
                                {% unless request.page_type == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%}
                                tabindex="-1">
                                  {{ childlink.title | escape }}
                                  <span class="icon icon-arrow-down" aria-hidden="true"></span>
                              </a>
                              <div class="site-nav__dropdown-grandchild">
                                <ul
                                  id="MenuChildren-{{ parent_index }}-{{ child_index }}"
                                  data-meganav-dropdown>
                                  {% for grandchildlink in childlink.links %}
                                    <li{% if grandchildlink.active %} class="site-nav--active"{% endif %}>
                                      <a
                                        href="{{ grandchildlink.url }}"
                                        class="site-nav__dropdown-link"
                                        data-meganav-type="child"
                                        {% unless request.page_type == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless %}
                                        tabindex="-1">
                                          {{ grandchildlink.title | escape }}
                                        </a>
                                    </li>
                                  {% endfor %}
                                </ul>
                              </div>
                            </li>
                          {% else %}
                            <li{% if childlink.active %} class="site-nav--active"{% endif %}>
                              <a
                                href="{{ childlink.url }}"
                                class="site-nav__dropdown-link"
                                data-meganav-type="child"
                                {% if childlink.active %}aria-current="page"{% endif %}
                                tabindex="-1">
                                  {{ childlink.title | escape }}
                              </a>
                            </li>
                          {% endif %}
                        {% endfor %}
                      </ul>
                    </li>
                  {% else %}
                    <li class="site-nav__item{% if link.active %} site-nav--active{% endif %}">
                      <a
                        href="{{ link.url }}"
                        class="site-nav__link"
                        data-meganav-type="child"
                        {% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
                          {{ link.title | escape }}
                      </a>
                    </li>
                  {% endif %}
                {% endfor %}

                {% comment %}
                  Remove comment tags below to add a search box to your header, visible on screens where your header menu
                  is displayed inline.
                  <li class="site-nav__item site-nav--search__bar medium-down--hide">
                    {% include 'search-bar', search_btn_style: 'btn', search_bar_location: 'search-bar--header' %}
                  </li>
                {% endcomment %}
                {% if shop.customer_accounts_enabled %}
                  <li class="site-nav__item site-nav__expanded-item site-nav__item--compressed">
                    <a class="site-nav__link site-nav__link--icon" href="{{ routes.account_url }}">
                      <span class="icon-fallback-text">
                        <span class="icon icon-customer" aria-hidden="true"></span>
                        <span class="fallback-text">
                          {% if customer %}
                            {{ 'layout.customer.account' | t }}
                          {% else %}
                            {{ 'layout.customer.log_in' | t }}
                          {% endif %}
                        </span>
                      </span>
                    </a>
                  </li>
                {% endif %}

                {% if section.settings.search == 'page' or section.settings.search == 'modal' %}
                  {% assign search_modal = true %}
                  {% if section.settings.search == 'page' %}
                    {% assign search_modal = false %}
                  {% endif %}
                  <li class="site-nav__item site-nav__item--compressed">
                    <a class="site-nav__link site-nav__link--icon{% if search_modal %} js-toggle-search-modal{% endif %}" data-mfp-src="#SearchModal">
                      <span class="icon-fallback-text">
                        <span class="icon icon-search" aria-hidden="true"></span>
                        <span class="fallback-text">{{ 'general.search.title' | t }}</span>
                      </span>
                    </a>
                  </li>
                {% endif %}

                <li class="site-nav__item site-nav__item--compressed">
                  <a href="{{ routes.cart_url }}" class="site-nav__link site-nav__link--icon cart-link js-drawer-open-button-right" aria-controls="CartDrawer">
                    <span class="icon-fallback-text">
                      <span class="icon icon-cart" aria-hidden="true"></span>
                      <span class="fallback-text">{{ 'layout.cart.title' | t }}</span>
                    </span>
                    <span class="cart-link__bubble{% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}"></span>
                  </a>
                </li>

              </ul>
              <!-- //site-nav -->
            </nav>
            <div class="grid__item large--hide one-quarter custom-quarter">
              <div class="site-nav--mobile text-right">
                {% if section.settings.search == 'page' or section.settings.search == 'modal' %}
                  {% assign search_modal = true %}
                  {% if section.settings.search == 'page' %}
                    {% assign search_modal = false %}
                  {% endif %}
                  <li class="site-nav__item site-nav__item--compressed">
                    <a class="site-nav__link site-nav__link--icon{% if search_modal %} js-toggle-search-modal{% endif %}" data-mfp-src="#SearchModal">
                      <span class="icon-fallback-text">
                        <span class="icon icon-search custom-icon-search" aria-hidden="true"></span>
                        <span class="fallback-text">{{ 'general.search.title' | t }}</span>
                      </span>
                    </a>
                  </li>
                {% endif %}
                <a href="{{ routes.cart_url }}" class="site-nav__link cart-link js-drawer-open-button-right custom-cart-icon" aria-controls="CartDrawer">
                  <span class="icon-fallback-text">
                    <span class="icon icon-cart" aria-hidden="true"></span>
                    <span class="fallback-text">{{ 'layout.cart.title' | t }}</span>
                  </span>
                  <span class="cart-link__bubble{% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}"></span>
                </a>
              </div>
            </div>
          </div>

        </div>
      </header>
    </div>
  </div>
</div>

[dmwwebartisan]

@NickWebDev 

Thanks!