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>
