Shopify themes, liquid, logos, and UX
This is an accepted solution.
can you please share mobile menu code
This is an accepted solution.
@lslelegancethanks for assint
i have done this please check also someone some issue ty ths code
drawer-menu.liquid
<div class="drawer__inner drawer-left__inner">
{% if section.settings.drawer_search_enable %}
{% include 'search-bar', search_btn_style: 'btn--secondary', search_bar_location: 'search-bar--drawer' %}
{% endif %}
<ul class="mobile-nav">
{% for link in linklists[section.settings.main_menu_link_list].links %}
{% if link.links != blank %}
<li class="mobile-nav__item">
<div class="mobile-nav__has-sublist">
<a
href="{{ link.url }}"
class="mobile-nav__link"
id="Label-{{ forloop.index }}"
{% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>{{ link.title | escape }}</a>
<div class="mobile-nav__toggle">
<button type="button" class="mobile-nav__toggle-btn icon-fallback-text" aria-controls="Linklist-{{ forloop.index }}" aria-expanded="false">
<span class="icon-fallback-text mobile-nav__toggle-open">
<span class="icon icon-plus" aria-hidden="true"></span>
<span class="fallback-text">{{ 'general.drawers.expand_submenu' | t }} {{ link.title | escape }}</span>
</span>
<span class="icon-fallback-text mobile-nav__toggle-close">
<span class="icon icon-minus" aria-hidden="true"></span>
<span class="fallback-text">{{ 'general.drawers.collapse_submenu' | t }} {{ link.title | escape }}</span>
</span>
</button>
</div>
</div>
<ul class="mobile-nav__sublist" id="Linklist-{{ forloop.index }}" aria-labelledby="Label-{{ forloop.index }}" role="navigation">
{% assign parent_index = forloop.index %}
{% for childlink in link.links %}
{% if childlink.links != blank %}
<li class="mobile-nav__item">
<div class="mobile-nav__has-sublist">
<a
href="{{ childlink.url }}"
class="mobile-nav__link"
id="Label-{{ parent_index }}-{{ forloop.index }}"
{% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
{{ childlink.title }}
</a>
<div class="mobile-nav__toggle">
<button type="button" class="mobile-nav__toggle-btn icon-fallback-text" aria-controls="Linklist-{{ parent_index }}-{{ forloop.index }}" aria-expanded="false">
<span class="icon-fallback-text mobile-nav__toggle-open">
<span class="icon icon-plus" aria-hidden="true"></span>
<span class="fallback-text">{{ 'general.drawers.expand_submenu' | t }} {{ link.title | escape }}</span>
</span>
<span class="icon-fallback-text mobile-nav__toggle-close">
<span class="icon icon-minus" aria-hidden="true"></span>
<span class="fallback-text">{{ 'general.drawers.collapse_submenu' | t }} {{ link.title | escape }}</span>
</span>
</button>
</div>
</div>
<ul class="mobile-nav__sublist mobile-nav__subsublist" id="Linklist-{{ parent_index }}-{{ forloop.index }}" aria-labelledby="Label-{{ parent_index }}-{{ forloop.index }}" role="navigation">
{% for grandchildlink in childlink.links %}
<li class="mobile-nav__item">
<a
href="{{ grandchildlink.url }}"
class="mobile-nav__link"
{% unless request.page_type == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless%}>
{{ grandchildlink.title | escape }}
</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li class="mobile-nav__item">
<a
href="{{ childlink.url }}"
class="mobile-nav__link"
{% unless request.page_type == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%}>
{{ childlink.title | escape }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% else %}
<li class="mobile-nav__item">
<a
href="{{ link.url }}"
class="mobile-nav__link"
{% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
{{ link.title | escape }}
</a>
</li>
{% endif %}
{% endfor %}
{% comment %}
Spacer element
{% endcomment %}
<li class="mobile-nav__spacer"></li>
{% comment %}
If customer accounts are enabled, provide login and create account links
{% endcomment %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
<li class="mobile-nav__item mobile-nav__item--secondary">
<a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a>
</li>
<li class="mobile-nav__item mobile-nav__item--secondary">
{{ 'layout.customer.log_out' | t | customer_logout_link }}
</li>
{% else %}
<li class="mobile-nav__item mobile-nav__item--secondary">
{{ 'layout.customer.log_in' | t | customer_login_link }}
</li>
<li class="mobile-nav__item mobile-nav__item--secondary">
{{ 'layout.customer.create_account' | t | customer_register_link }}
</li>
{% endif %}
{% endif %}
{% for link in linklists[section.settings.drawer_bottom_link_list].links %}
<li class="mobile-nav__item mobile-nav__item--secondary"><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
<!-- //mobile-nav -->
<ul class="no-bullets social-icons">
{% if settings.social_facebook_link != blank %}
<li>
<a href="{{ settings.social_facebook_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Facebook' }}">
<span class="icon icon-facebook" aria-hidden="true"></span>
Facebook
</a>
</li>
{% endif %}
{% if settings.social_twitter_link != blank %}
<li>
<a href="{{ settings.social_twitter_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Twitter' }}">
<span class="icon icon-twitter" aria-hidden="true"></span>
Twitter
</a>
</li>
{% endif %}
{% if settings.social_pinterest_link != blank %}
<li>
<a href="{{ settings.social_pinterest_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Pinterest' }}">
<span class="icon icon-pinterest" aria-hidden="true"></span>
Pinterest
</a>
</li>
{% endif %}
{% if settings.social_instagram_link != blank %}
<li>
<a href="{{ settings.social_instagram_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Instagram' }}">
<span class="icon icon-instagram" aria-hidden="true"></span>
Instagram
</a>
</li>
{% endif %}
{% if settings.social_snapchat_link != blank %}
<li>
<a href="{{ settings.social_snapchat_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Snapchat' }}">
<span class="icon icon-snapchat" aria-hidden="true"></span>
Snapchat
</a>
</li>
{% endif %}
{% if settings.social_google_plus_link != blank %}
<li>
<a href="{{ settings.social_google_plus_link | escape }}" rel="publisher" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Google Plus' }}">
<span class="icon icon-google_plus" aria-hidden="true"></span>
Google Plus
</a>
</li>
{% endif %}
{% if settings.social_tumblr_link != blank %}
<li>
<a href="{{ settings.social_tumblr_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Tumblr' }}">
<span class="icon icon-tumblr" aria-hidden="true"></span>
Tumblr
</a>
</li>
{% endif %}
{% if settings.social_youtube_link != blank %}
<li>
<a href="{{ settings.social_youtube_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'YouTube' }}">
<span class="icon icon-youtube" aria-hidden="true"></span>
YouTube
</a>
</li>
{% endif %}
{% if settings.social_vimeo_link != blank %}
<li>
<a href="{{ settings.social_vimeo_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Vimeo' }}">
<span class="icon icon-vimeo" aria-hidden="true"></span>
Vimeo
</a>
</li>
{% endif %}
{% if settings.social_fancy_link != blank %}
<li>
<a href="{{ settings.social_fancy_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Fancy' }}">
<span class="icon icon-fancy" aria-hidden="true"></span>
Fancy
</a>
</li>
{% endif %}
</ul>
</div>
add css theme.scss bottom
@media screen and (max-width: 768px) {
.mobile-nav + ul.no-bullets.social-icons {
display: flex;
position: absolute;
bottom: 0;
justify-content: center;
left: 0;
right: 0;
}
}
@lslelegance
Welcome to Shopify Community,
You can add it by the custom Code.
For that you have to hire a developer.
Thank you.
This is an accepted solution.
can you please share mobile menu code
where is mobile menu found please ?
This is an accepted solution.
@lslelegancethanks for assint
i have done this please check also someone some issue ty ths code
drawer-menu.liquid
<div class="drawer__inner drawer-left__inner">
{% if section.settings.drawer_search_enable %}
{% include 'search-bar', search_btn_style: 'btn--secondary', search_bar_location: 'search-bar--drawer' %}
{% endif %}
<ul class="mobile-nav">
{% for link in linklists[section.settings.main_menu_link_list].links %}
{% if link.links != blank %}
<li class="mobile-nav__item">
<div class="mobile-nav__has-sublist">
<a
href="{{ link.url }}"
class="mobile-nav__link"
id="Label-{{ forloop.index }}"
{% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>{{ link.title | escape }}</a>
<div class="mobile-nav__toggle">
<button type="button" class="mobile-nav__toggle-btn icon-fallback-text" aria-controls="Linklist-{{ forloop.index }}" aria-expanded="false">
<span class="icon-fallback-text mobile-nav__toggle-open">
<span class="icon icon-plus" aria-hidden="true"></span>
<span class="fallback-text">{{ 'general.drawers.expand_submenu' | t }} {{ link.title | escape }}</span>
</span>
<span class="icon-fallback-text mobile-nav__toggle-close">
<span class="icon icon-minus" aria-hidden="true"></span>
<span class="fallback-text">{{ 'general.drawers.collapse_submenu' | t }} {{ link.title | escape }}</span>
</span>
</button>
</div>
</div>
<ul class="mobile-nav__sublist" id="Linklist-{{ forloop.index }}" aria-labelledby="Label-{{ forloop.index }}" role="navigation">
{% assign parent_index = forloop.index %}
{% for childlink in link.links %}
{% if childlink.links != blank %}
<li class="mobile-nav__item">
<div class="mobile-nav__has-sublist">
<a
href="{{ childlink.url }}"
class="mobile-nav__link"
id="Label-{{ parent_index }}-{{ forloop.index }}"
{% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
{{ childlink.title }}
</a>
<div class="mobile-nav__toggle">
<button type="button" class="mobile-nav__toggle-btn icon-fallback-text" aria-controls="Linklist-{{ parent_index }}-{{ forloop.index }}" aria-expanded="false">
<span class="icon-fallback-text mobile-nav__toggle-open">
<span class="icon icon-plus" aria-hidden="true"></span>
<span class="fallback-text">{{ 'general.drawers.expand_submenu' | t }} {{ link.title | escape }}</span>
</span>
<span class="icon-fallback-text mobile-nav__toggle-close">
<span class="icon icon-minus" aria-hidden="true"></span>
<span class="fallback-text">{{ 'general.drawers.collapse_submenu' | t }} {{ link.title | escape }}</span>
</span>
</button>
</div>
</div>
<ul class="mobile-nav__sublist mobile-nav__subsublist" id="Linklist-{{ parent_index }}-{{ forloop.index }}" aria-labelledby="Label-{{ parent_index }}-{{ forloop.index }}" role="navigation">
{% for grandchildlink in childlink.links %}
<li class="mobile-nav__item">
<a
href="{{ grandchildlink.url }}"
class="mobile-nav__link"
{% unless request.page_type == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless%}>
{{ grandchildlink.title | escape }}
</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li class="mobile-nav__item">
<a
href="{{ childlink.url }}"
class="mobile-nav__link"
{% unless request.page_type == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%}>
{{ childlink.title | escape }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% else %}
<li class="mobile-nav__item">
<a
href="{{ link.url }}"
class="mobile-nav__link"
{% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
{{ link.title | escape }}
</a>
</li>
{% endif %}
{% endfor %}
{% comment %}
Spacer element
{% endcomment %}
<li class="mobile-nav__spacer"></li>
{% comment %}
If customer accounts are enabled, provide login and create account links
{% endcomment %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
<li class="mobile-nav__item mobile-nav__item--secondary">
<a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a>
</li>
<li class="mobile-nav__item mobile-nav__item--secondary">
{{ 'layout.customer.log_out' | t | customer_logout_link }}
</li>
{% else %}
<li class="mobile-nav__item mobile-nav__item--secondary">
{{ 'layout.customer.log_in' | t | customer_login_link }}
</li>
<li class="mobile-nav__item mobile-nav__item--secondary">
{{ 'layout.customer.create_account' | t | customer_register_link }}
</li>
{% endif %}
{% endif %}
{% for link in linklists[section.settings.drawer_bottom_link_list].links %}
<li class="mobile-nav__item mobile-nav__item--secondary"><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
<!-- //mobile-nav -->
<ul class="no-bullets social-icons">
{% if settings.social_facebook_link != blank %}
<li>
<a href="{{ settings.social_facebook_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Facebook' }}">
<span class="icon icon-facebook" aria-hidden="true"></span>
Facebook
</a>
</li>
{% endif %}
{% if settings.social_twitter_link != blank %}
<li>
<a href="{{ settings.social_twitter_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Twitter' }}">
<span class="icon icon-twitter" aria-hidden="true"></span>
Twitter
</a>
</li>
{% endif %}
{% if settings.social_pinterest_link != blank %}
<li>
<a href="{{ settings.social_pinterest_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Pinterest' }}">
<span class="icon icon-pinterest" aria-hidden="true"></span>
Pinterest
</a>
</li>
{% endif %}
{% if settings.social_instagram_link != blank %}
<li>
<a href="{{ settings.social_instagram_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Instagram' }}">
<span class="icon icon-instagram" aria-hidden="true"></span>
Instagram
</a>
</li>
{% endif %}
{% if settings.social_snapchat_link != blank %}
<li>
<a href="{{ settings.social_snapchat_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Snapchat' }}">
<span class="icon icon-snapchat" aria-hidden="true"></span>
Snapchat
</a>
</li>
{% endif %}
{% if settings.social_google_plus_link != blank %}
<li>
<a href="{{ settings.social_google_plus_link | escape }}" rel="publisher" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Google Plus' }}">
<span class="icon icon-google_plus" aria-hidden="true"></span>
Google Plus
</a>
</li>
{% endif %}
{% if settings.social_tumblr_link != blank %}
<li>
<a href="{{ settings.social_tumblr_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Tumblr' }}">
<span class="icon icon-tumblr" aria-hidden="true"></span>
Tumblr
</a>
</li>
{% endif %}
{% if settings.social_youtube_link != blank %}
<li>
<a href="{{ settings.social_youtube_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'YouTube' }}">
<span class="icon icon-youtube" aria-hidden="true"></span>
YouTube
</a>
</li>
{% endif %}
{% if settings.social_vimeo_link != blank %}
<li>
<a href="{{ settings.social_vimeo_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Vimeo' }}">
<span class="icon icon-vimeo" aria-hidden="true"></span>
Vimeo
</a>
</li>
{% endif %}
{% if settings.social_fancy_link != blank %}
<li>
<a href="{{ settings.social_fancy_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Fancy' }}">
<span class="icon icon-fancy" aria-hidden="true"></span>
Fancy
</a>
</li>
{% endif %}
</ul>
</div>
add css theme.scss bottom
@media screen and (max-width: 768px) {
.mobile-nav + ul.no-bullets.social-icons {
display: flex;
position: absolute;
bottom: 0;
justify-content: center;
left: 0;
right: 0;
}
}
Thank you so much !
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025