How To Add Mega Menu in Shopify [Without Any APP]

Want a mega menu for your Shopify store but ditching apps? You can achieve it! This post unveils a step-by-step guide to building a mega menu using your theme’s code. We’ll cover defining the structure, editing key theme files (.liquid), and adding CSS/JS for customization. Get ready to impress your visitors with a sophisticated navigation system!

Step 1: Create Collection Metafield

Create a new Collection Metafield with following properties:

  • Name: Image
  • Type: File
  • Namespace: custom.image

Step 2: Add Schema Code

Add the following schema code in header.liquid file after "info": "t:sections.header.settings.menu_type_desktop.info" }, line of code

{
  "type": "select",
  "id": "mega_menu_images_toggle",
  "options": [
    {
      "value": "none",
      "label": "None"
    },
    {
      "value": "metafield",
      "label": "Metafield"
    }
  ],
  "default": "none",
  "label": "Mega menu collection image type"
},
{
  "type": "checkbox",
  "id": "mega_menu_images_title",
  "label": "Hide the collection title (when mega menu images is active)",
  "default": false
},
{
  "type": "checkbox",
  "id": "megamenu_backdrop_toggle",
  "label": "Add overlay when megamenu is open",
  "default": true
},
{
  "type": "select",
  "id": "dropdown_menu_images_toggle",
  "options": [
    {
      "value": "none",
      "label": "None"
    },
    {
      "value": "metafield",
      "label": "Metafield"
    }
  ],
  "default": "none",
  "label": "Dropdown menu collection image type"
},
{
  "type": "range",
  "id": "menu_dropdown_width",
  "label": "Dropdown Menu Width",
  "default": 25,
  "min": 20,
  "max": 40,
  "step": 1
},
{
  "type": "select",
  "id": "drawer_menu_images_toggle",
  "options": [
    {
      "value": "none",
      "label": "None"
    },
    {
      "value": "metafield",
      "label": "Metafield"
    }
  ],
  "default": "none",
  "label": "Drawer menu collection image type"
},
{
  "type": "range",
  "id": "menu_images_size",
  "label": "Menu Image Size",
  "info": "Applies to drawer and dropdown menu",
  "default": 60,
  "min": 50,
  "max": 100,
  "step": 1,
  "unit": "px"
},
{
  "type": "checkbox",
  "id": "menu_images_border_toggle",
  "label": "Enable Menu Border",
  "info": "Use with Dropdown and Drawer menu with images",
  "default": false
},
{
  "type": "color",
  "id": "menu_images_border_color",
  "label": "Menu Images Border Color",
  "default": "#eaeaea"
},

Step 3: Create snippet files

Create a new snippet file megamenu-image-custom.liquid and add following code on this file:

<ul class="mega-menu__list megamenu-with-image page-width">
  {%- for childlink in link.links -%}
    {% assign image_url = '' %}
    {% if menu_images_toggle == 'metafield' %}
      {% assign image_url = childlink.object.metafields.custom.image | img_url: 'master' %}
    {% endif %}
    
    <li>
      <div class="mega-menu__column">
        {% if image_url != blank %}
          <a href="{{ childlink.url }}">
            <img src="{{ image_url }}" alt="{{ childlink.title | escape }}" class="mega-menu__image">
          </a>
        {% endif %}
        <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 menu_titles_toggle %}hide-title{% endif %}" {% if childlink.current %} aria-current="page" {% endif %}>
          {{ childlink.title | escape }}
        </a>
      </div>
    </li>
  {%- endfor -%}
</ul>

<style>

  .mega-menu__image {
    width: 100%;
    border-radius: 10px; /* Adjust the radius value as needed (ex: 10px for rounded corners, 0px for square corners, 50% makes the image a circle) */
    object-fit: cover; 
    aspect-ratio: 1 / 1;
  }

  .mega-menu__column {
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    text-align: center;
  }

.mega-menu__list.megamenu-with-image {
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(calc((100% - (5 * 4rem)) / 6), calc((100% - (5 * 4rem)) / 6)));
}

.mega-menu__link.hide-title {
  display: none; 
}

.menu-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5); 
  z-index: 3; 
}

</style>

{% if megamenu_backdrop_toggle %}

  <style>
  #menu-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 3;
  }
  </style>
  
  <script>
  document.addEventListener('DOMContentLoaded', function () {
    const menuBackdrop = document.getElementById('menu-backdrop');
    document.querySelectorAll('.mega-menu').forEach(function(megaMenu) {
      megaMenu.addEventListener('toggle', function () {
        const isAnyMenuOpen = [...document.querySelectorAll('.mega-menu')].some(menu => menu.hasAttribute('open'));
        menuBackdrop.style.display = isAnyMenuOpen ? 'block' : 'none';
      });
    });
    menuBackdrop.addEventListener('click', function () {
      document.querySelectorAll('.mega-menu').forEach(function(megaMenu) {
        megaMenu.removeAttribute('open');
      });
      menuBackdrop.style.display = 'none';
    });
  });
  
  </script>

{% endif %}

Create a new snippet menu-image-custom.liquid and add the following code into this file:

{% if menu_images_toggle != 'none' %}
  {% assign menu_image_url = '' %}
  {% if menu_images_toggle == 'metafield' %}
    {% if link.object.metafields.custom.image %}
      {% assign menu_image_url = link.object.metafields.custom.image | image_url: width: menu_images_size, height: menu_images_size %}
      <img src="{{ menu_image_url }}" alt="{{ link.title | escape }}" class="header-menu-image">
    {% endif %}
  {% endif %}
{% endif %}

<style>

  {% if menu_images_toggle and menu_images_border_toggle %}
    .menu-drawer__menu {
      list-style: none;
      padding-left: 0; /* Remove default padding */
    }
    
    .menu-drawer__menu li {
      border-top: 1px solid {{ menu_images_border_color }};
    }
    
    .menu-drawer__menu li:last-child {
      border-bottom: 1px solid {{ menu_images_border_color }};
    }  
    
    .header__submenu > li:not(:last-child) {
      border-bottom: 1px solid {{ menu_images_border_color }};
    }
    
    .header__submenu.header__submenu > li:not(:last-child) {
      border-bottom: 1px solid {{ menu_images_border_color }};
    }
    
    .header__submenu.list-menu {
      padding: 0;
    }
    .header__submenu.header__submenu {
      margin: 0;
    }
  
  {% endif %}
    
  .header-menu-image {
    margin-left: auto; /* This ensures that the link (image) is pushed to the far right */
  }
  
  .list-menu--disclosure.list-menu--images {
    width: {{ menu_dropdown_width }}rem;
  }

</style>

Step 4: Replace Code in header-mega-menu.liquid

Replace code in header-mega-menu.liquid file with the following code:

{% 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"
              >
                <span
                  {%- if link.child_active %}
                    class="header__active-menu-item"
                  {% endif %}
                >
                  {{- link.title | escape -}}
                </span>
                {% render 'icon-caret' %}
              </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"
              >
                {% if section.settings.menu_type_desktop == 'mega'
                  and section.settings.mega_menu_images_toggle != 'none'
                %}
                  {% render 'megamenu-image-custom',
                    link: link,
                    menu_images_toggle: section.settings.mega_menu_images_toggle,
                    menu_titles_toggle: section.settings.mega_menu_images_title,
                    megamenu_backdrop_toggle: section.settings.megamenu_backdrop_toggle
                  %}
                {% else %}
                  <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>
                {% endif %}
              </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>

Step 5: Replace code in header-drawer.liquid file

Replace code in header-drawer.liquid with the following code:

{% comment %}
  Renders a header drawer menu for mobile and desktop.

  Usage:
  {% render 'header-drawer' %}
{% endcomment %}

<style>
  ul.menu-drawer__menu.has-submenu.list-menu li a,
  ul.menu-drawer__menu.has-submenu.list-menu summary{
    color: black !important;
  }
</style>

<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{% if link.child_active %} menu-drawer__menu-item--active{% endif %}"
                      >
                        {{ link.title | escape }}
                        {% render 'menu-image-custom',
                          link: link,
                          menu_images_toggle: section.settings.drawer_menu_images_toggle,
                          menu_images_size: section.settings.menu_images_size,
                          menu_images_border_toggle: section.settings.menu_images_border_toggle,
                          menu_images_border_color: section.settings.menu_images_border_color
                        %}

                        {% 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 }}

                                    {% render 'menu-image-custom',
                                      link: childlink,
                                      menu_images_toggle: section.settings.drawer_menu_images_toggle,
                                      menu_images_size: section.settings.menu_images_size,
                                      menu_images_border_toggle: section.settings.menu_images_border_toggle,
                                      menu_images_border_color: section.settings.menu_images_border_color
                                    %}
                                  </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"
                                    >
                                      {{ childlink.title | escape }}
                                      {% render 'menu-image-custom',
                                        link: childlink,
                                        menu_images_toggle: section.settings.drawer_menu_images_toggle,
                                        menu_images_size: section.settings.menu_images_size,
                                        menu_images_border_toggle: section.settings.menu_images_border_toggle,
                                        menu_images_border_color: section.settings.menu_images_border_color
                                      %}
                                      {% 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 }}
                                        {% render 'menu-image-custom',
                                          link: childlink,
                                          menu_images_toggle: section.settings.drawer_menu_images_toggle,
                                          menu_images_size: section.settings.menu_images_size,
                                          menu_images_border_toggle: section.settings.menu_images_border_toggle,
                                          menu_images_border_color: section.settings.menu_images_border_color
                                        %}
                                      </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 }}
                                              {% render 'menu-image-custom',
                                                link: grandchildlink,
                                                menu_images_toggle: section.settings.drawer_menu_images_toggle,
                                                menu_images_size: section.settings.menu_images_size,
                                                menu_images_border_toggle: section.settings.menu_images_border_toggle,
                                                menu_images_border_color: section.settings.menu_images_border_color
                                              %}
                                            </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 }}
                      {% render 'menu-image-custom',
                        link: link,
                        menu_images_toggle: section.settings.drawer_menu_images_toggle,
                        menu_images_size: section.settings.menu_images_size,
                        menu_images_border_toggle: section.settings.menu_images_border_toggle,
                        menu_images_border_color: section.settings.menu_images_border_color
                      %}
                    </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"
              >
                <account-icon>
                  {%- if customer and customer.has_avatar? -%}
                    {{ customer | avatar }}
                  {%- else -%}
                    {% render 'icon-account' %}
                  {%- endif -%}
                </account-icon>
                {%- 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>

Step 6: Replace code in header-dropdown-menu.liquid

Replace header-dropdown-menu.liquid code with the following code:

{% comment %}
  Renders a standard dropdown style menu for the header.

  Usage:
  {% render 'header-dropdown-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 }}">
              <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>
              <ul
                id="HeaderMenu-MenuList-{{ forloop.index }}"
                class="header__submenu list-menu list-menu--disclosure list-menu-images color-{{ section.settings.menu_color_scheme }} gradient caption-large motion-reduce global-settings-popup"
                role="list"
                tabindex="-1"
              >
                {%- for childlink in link.links -%}
                  <li>
                    {%- if childlink.links == blank -%}
                      <a
                        id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
                        href="{{ childlink.url }}"
                        class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if childlink.current %} list-menu__item--active{% endif %}"
                        {% if childlink.current %}
                          aria-current="page"
                        {% endif %}
                      >
                        {{ childlink.title | escape }}
                        {% render 'menu-image-custom',
                          link: childlink,
                          menu_images_toggle: section.settings.dropdown_menu_images_toggle,
                          menu_dropdown_width: section.settings.menu_dropdown_width,
                          menu_images_size: section.settings.menu_images_size,
                          menu_images_border_toggle: section.settings.menu_images_border_toggle,
                          menu_images_border_color: section.settings.menu_images_border_color
                        %}
                      </a>
                    {%- else -%}
                      <details id="Details-HeaderSubMenu-{{ link.handle }}-{{ childlink.handle }}">
                        <summary
                          id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
                          class="header__menu-item link link--text list-menu__item focus-inset caption-large"
                        >
                          <span>{{ childlink.title | escape }}</span>
                          {% render 'menu-image-custom',
                            link: childlink,
                            menu_images_toggle: section.settings.dropdown_menu_images_toggle,
                            menu_dropdown_width: section.settings.menu_dropdown_width,
                            menu_images_size: section.settings.menu_images_size,
                            menu_images_border_toggle: section.settings.menu_images_border_toggle,
                            menu_images_border_color: section.settings.menu_images_border_color
                          %}

                          {% render 'icon-caret' %}
                        </summary>
                        <ul
                          id="HeaderMenu-SubMenuList-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
                          class="header__submenu list-menu motion-reduce"
                        >
                          {%- for grandchildlink in childlink.links -%}
                            <li>
                              <a
                                id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
                                href="{{ grandchildlink.url }}"
                                class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if grandchildlink.current %} list-menu__item--active{% endif %}"
                                {% if grandchildlink.current %}
                                  aria-current="page"
                                {% endif %}
                              >
                                {{ grandchildlink.title | escape }}
                                {% render 'menu-image-custom',
                                  link: grandchildlink,
                                  menu_images_toggle: section.settings.dropdown_menu_images_toggle,
                                  menu_dropdown_width: section.settings.menu_dropdown_width,
                                  menu_images_size: section.settings.menu_images_size,
                                  menu_images_border_toggle: section.settings.menu_images_border_toggle,
                                  menu_images_border_color: section.settings.menu_images_border_color
                                %}
                              </a>
                            </li>
                          {%- endfor -%}
                        </ul>
                      </details>
                    {%- endif -%}
                  </li>
                {%- endfor -%}
              </ul>
            </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>

Step 7: Add code in theme.liquid file

Add the following code in theme.liquid file after <body line

<div id="menu-backdrop"></div>
5/5 - (68 votes)

About

Leave a Comment

Your email address will not be published. Required fields are marked *