Nesting menu in footer - plus icon mobile only

Highlighted
Tourist
18 0 0

Hi I currently have a mega menu in the footer & want to condense on mobile by adding plus icons for drop downs

Here is an example

Screen Shot 2020-06-24 at 1.13.24 PM.png

If someone could help that would be greatly appreciated

Below is the code for the footer

{%- 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 %}

 

0 Likes