Nested Footer Menu - Mobile only

Highlighted
Tourist
20 0 0
Hi I want to create a nested footer menu for mobile one.

I've attached a screenshot as to what I want, it's similar to what we have for our mobile side nav. 

Screen Shot 2020-07-15 at 8.25.10 PM.pngScreen Shot 2020-07-15 at 8.25.14 PM.png

Here is the code, is there any possibility you could help?

Cheers!

 

 

 

{%- assign has_twitter = false -%}

<div class="footer">
  <div class="container">
 
    
    <div class="footer__content grid grid--large">
      {%- for block in section.blocks -%}
        {%- case block.type -%}
          {%- when 'text' -%}
            <div class="footer__block grid__cell 1/2--handheld 1/3--lap 1/4--desk" {{ block.shopify_attributes }}>
              <h2 class="footer__title text--uppercase">{{ block.settings.title | escape }}</h2>

              <div class="footer__text rte">
                {{ block.settings.text }}
              </div>

              {%- capture social_media -%}
                {%- include 'social-media', small_icons: false -%}
              {%- endcapture -%}

              {%- if block.settings.show_social_media and social_media != blank -%}
                {{- social_media -}}
              {%- endif -%}
            </div>

          {%- when 'links' -%}
            <div class="footer__block grid__cell 1/2--handheld 1/3--lap 1/4--desk" {{ block.shopify_attributes }}>
              {%- assign menu = linklists[block.settings.menu_linklist] -%}

              <h2 class="footer__title text--uppercase">{{ menu.title }}</h2>

              {%- if menu.links.size > 0 -%}
                <ul class="footer__links list--unstyled">
                  {%- for link in menu.links -%}
                    <li class="footer__link"><a href="{{ link.url }}" class="link">{{ link.title }}</a></li>
                  {%- endfor -%}
                </ul>
              {%- endif -%}
            </div>

          {%- when 'contact' -%}
            <div class="footer__block grid__cell 1/2--handheld 1/3--lap 1/4--desk" {{ block.shopify_attributes }}>
              <h2 class="footer__title text--uppercase">{{ block.settings.title | escape }}</h2>
              <p>
                {%- if block.settings.phone_number != blank -%}
                <a href="tel:{{ block.settings.phone_number }}" class="link">{{ block.settings.phone_number | escape }}</a>
                {%- endif -%}

                {%- if block.settings.email != blank -%}
                  {%- if block.settings.phone_number != blank -%}
                    <br>
                  {%- endif -%}

                  <a href="mailto:{{ block.settings.email }}" class="link">{{ block.settings.email | escape }}</a>
                {%- endif -%}
              </p>
            </div>

          {%- when 'twitter' -%}
            {%- assign has_twitter = true -%}
            {%- assign twitter_handle = block.settings.twitter_handle | remove_first: '@' -%}
            <div id="twitter-timeline" style="display: none !important"></div>

            <div class="footer__block grid__cell 1/2--handheld 1/3--lap 1/4--desk"
                 {% if twitter_handle != blank %}data-twitter-handle="{{ twitter_handle }}"{% endif %}
                 {{ block.shopify_attributes }}>
              <div class="tweet box box--secondary">
                <div class="box__content box__content--small-padding">
                  <p class="tweet__username">{%- include 'icon' with 'twitter' -%} <a href="https://twitter.com/{{ twitter_handle }}" class="link" target="_blank">@{{ twitter_handle }}</a></p>
                  <div class="tweet__content"></div>
                  <date class="tweet__date text--uppercase"></date>
                </div>
              </div>
            </div>
        {%- endcase -%}
      {%- endfor -%}
    </div>

    <div class="footer__copyright">
      <a href="{{ shop.url }}" class="link">© {{ shop.name }}</a> 

      {%- if section.settings.show_payment_methods -%}
        <ul class="footer__payment-methods list--unstyled">
          {%- for type in shop.enabled_payment_types -%}
            <li class="footer__payment-method">
              {{ type | payment_type_svg_tag }}
            </li>
          {%- endfor -%}
        </ul>
      {%- endif -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Footer",
  "class": "shopify-section__footer",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_payment_methods",
      "label": "Show payment methods",
      "default": true
    }
  ],
  "blocks": [
    {
      "type": "text",
      "name": "Text",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "About the shop"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Text",
          "default": "<p>Use this text area to tell your customers about your brand and vision. You can change it in the theme settings.</p>"
        },
        {
          "type": "checkbox",
          "id": "show_social_media",
          "label": "Show social media",
          "info": "Make sure to have properly configured your social media in the theme settings",
          "default": true
        }
      ]
    },
    {
      "type": "links",
      "name": "Links",
      "settings": [
        {
          "type": "link_list",
          "id": "menu_linklist",
          "label": "Menu",
          "info": "This menu won't show dropdown items."
        }
      ]
    },
    {
      "type": "contact",
      "name": "Contact",
      "limit": 2,
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Contact"
        },
        {
          "type": "text",
          "id": "phone_number",
          "label": "Phone number",
          "default": "(333) 123 456"
        },
        {
          "type": "text",
          "id": "email",
          "label": "Email address",
          "default": "john@doe.com"
        }
      ]
    },
    {
      "type": "twitter",
      "name": "Twitter feed",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "twitter_handle",
          "label": "Twitter username"
        }
      ]
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "text",
        "settings": {}
      },
      {
        "type": "links",
        "settings": {
          "menu_linklist": "footer"
        }
      },
      {
        "type": "contact",
        "settings": {}
      }
    ]
  }
}
{% endschema %}

 

 

Copy
0 Likes