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 !
User | RANK |
---|---|
196 | |
155 | |
79 | |
70 | |
66 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023