@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;
}
}
If helpful then please
Like and
Accept Solution.
Want to modify or custom changes on store
Hire me.
- Feel free to contact me on
[email protected] regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
