Shopify themes, liquid, logos, and UX
I am using the Simple Theme and need to hide menu items when the collection is empty. I found the menu code in the sidebar.liquid. Can someone please help me with how to adjust the code to hide empty collections from the main menu? Any help is appreciated!
Beau
<div data-section-id="{{ section.id }}" data-section-type="sidebar-section"> <nav class="grid__item small--text-center medium-up--one-fifth" role="navigation"> <hr class="hr--small medium-up--hide"> <button id="ToggleMobileMenu" class="mobile-menu-icon medium-up--hide" aria-haspopup="true" aria-owns="SiteNav"> <span class="line"></span> <span class="line"></span> <span class="line"></span> <span class="line"></span> <span class="icon__fallback-text">{{ 'layout.navigation.menu' | t }}</span> </button> <div id="SiteNav" class="site-nav" role="menu"> <ul class="list--nav"> {% for link in menus[section.settings.main_menu_link_list].links %} {% assign outer_index = forloop.index %} {% if link.links != blank %} {% assign has_active_link = false %} {% if link.active or link.child_active %} {% assign has_active_link = true %} {% endif %} <li class="site-nav--has-submenu site-nav__item"> <button class="site-nav__link btn--link{% if has_active_link %} site-nav__collapse{% else %} site-nav__expand{% endif %}" aria-expanded="{{ has_active_link }}" aria-controls="Collapsible-{{ forloop.index }}"> {{ link.title | escape }} <span class="site-nav__link__text" aria-hidden="true">{% if has_active_link %}-{% else %}+{% endif %}</span> </button> <ul id="Collapsible-{{ forloop.index }}" class="site-nav__submenu{% if has_active_link %} site-nav__submenu--expanded{% else %} site-nav__submenu--collapsed{% endif %}" aria-hidden="{% if has_active_link %}false{% else %}true{% endif %}"{% unless has_active_link %} style="display: none;"{% endunless %}> {% for childlink in link.links %} {% if childlink.links != blank %} {% assign has_active_childlink = false %} {% if childlink.active or childlink.child_active %} {% assign has_active_childlink = true %} {% endif %} <li class="site-nav--has-submenu"> <button class="site-nav__link btn--link{% if has_active_childlink %} site-nav__collapse{% else %} site-nav__expand{% endif %}" aria-expanded="{{ has_active_childlink }}" aria-controls="Collapsible-{{ outer_index }}-{{ forloop.index }}"> {{ childlink.title | escape }} <span class="site-nav__link__text" aria-hidden="true">{% if has_active_childlink %}-{% else %}+{% endif %}</span> </button> <ul id="Collapsible-{{ outer_index }}-{{ forloop.index }}" class="site-nav__submenu site-nav__submenu--grandchild{% if has_active_childlink %} site-nav__submenu--expanded{% else %} site-nav__submenu--collapsed{% endif %}" aria-hidden="{% if has_active_childlink %}false{% else %}true{% endif %}"{% unless has_active_childlink %} style="display: none;"{% endunless %}> {% for grandchildlink in childlink.links %} <li class="site-nav__grandchild{% if grandchildlink.active or collection.current_type == grandchildlink.title or collection.current_vendor == grandchildlink.title %}{% unless forloop.first and grandchildlink.title contains 'All' and current_tags.size > 0 %} site-nav--active{% endunless %}{% endif %}"> <a href="{{ grandchildlink.url }}" class="site-nav__link"{% if grandchildlink.active %} aria-current="page"{% endif %}>{{ grandchildlink.title | escape }}</a> </li> {% endfor %} </ul> </li> {% else %} <li {% if childlink.active %}class="site-nav--active"{% endif %}> <a href="{{ childlink.url }}" class="site-nav__link"{% if childlink.active %} aria-current="page"{% endif %}>{{ childlink.title | escape }}</a> </li> {% endif %} {% endfor %} </ul> </li> {% else %} <li class="site-nav__item{% if link.active %} site-nav--active{% endif %}"> <a href="{{ link.url }}" class="site-nav__link"{% if link.active %} aria-current="page"{% endif %}>{{ link.title | escape }}</a> </li> {% endif %} {% endfor %} {% if shop.customer_accounts_enabled %} {% if customer %} <li> <a href="/account" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.account' | t }}</a> </li> <li> <a href="/account/logout" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.log_out' | t }}</a> </li> {% else %} <li> <a href="/account/login" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.log_in' | t }}</a> </li> <li> <a href="/account/register" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.create_account' | t }}</a> </li> {% endif %} {% endif %} </ul> <ul class="list--inline social-links"> {% 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' }}"> {% include 'icon-facebook' %} <span class="icon__fallback-text">Facebook</span> </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' }}"> {% include 'icon-twitter' %} <span class="icon__fallback-text">Twitter</span> </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' }}"> {% include 'icon-pinterest' %} <span class="icon__fallback-text">Pinterest</span> </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' }}"> {% include 'icon-instagram' %} <span class="icon__fallback-text">Instagram</span> </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' }}"> {% include 'icon-snapchat' %} <span class="icon__fallback-text">Snapchat</span> </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' }}"> {% include 'icon-google-plus' %} <span class="icon__fallback-text">Google Plus</span> </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' }}"> {% include 'icon-tumblr' %} <span class="icon__fallback-text">Tumblr</span> </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' }}"> {% include 'icon-youtube' %} <span class="icon__fallback-text">YouTube</span> </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' }}"> {% include 'icon-vimeo' %} <span class="icon__fallback-text">Vimeo</span> </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' }}"> {% include 'icon-fancy' %} <span class="icon__fallback-text">Fancy</span> </a> </li> {% endif %} {% if settings.main_blog != blank %} <li> <a href="/blogs/{{ settings.main_blog }}.atom"> {% include 'icon-rss' %} <span class="icon__fallback-text">Blog</span> </a> </li> {% endif %} </ul> </div> <hr class="medium-up--hide hr--small {% if template.name == 'index' %}hr--border-bottom{% endif %}"> </nav> </div> {% schema %} { "name": { "de": "Seitenleiste", "en": "Sidebar", "es": "Barra lateral", "fr": "Barre latérale", "it": "Sidebar", "ja": "サイドバー", "nl": "Zijbalk", "pt-BR": "Barra Lateral", "zh-CN": "侧边栏", "zh-TW": "側邊欄" }, "settings": [ { "type": "link_list", "id": "main_menu_link_list", "label": { "de": "Menü", "en": "Menu", "es": "Menú", "fr": "Menu", "it": "Menu", "ja": "メニュー", "nl": "Menu", "pt-BR": "Menu", "zh-CN": "菜单", "zh-TW": "選單" }, "default": "main-menu" } ] } {% endschema %}
User | RANK |
---|---|
229 | |
157 | |
61 | |
55 | |
46 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023