How can I remove a collapsible menu from the mobile footer and add two columns in flex design?

Shopify Discussion

Topic summary

A Shopify developer seeks to modify their mobile footer by:

Primary Goals:

  • Remove the collapsible menu functionality on mobile screens only
  • Implement a 2-column flex layout in a single row for mobile view

Current Setup:

  • Using Liquid templating with a footer menu block
  • Existing code includes collapsible button elements with class “collapsible”
  • Column sizing logic already defined (small-12, medium-4, large-2 classes)
  • Menu structure supports nested sub-menus

Response Provided:
Another user (azamgill) offered updated code, though the provided snippet appears corrupted or improperly formatted in both the original question and response, making the exact solution unclear.

Status: The discussion remains open with a potential solution shared, but implementation details need clarification due to formatting issues in the code blocks.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

I want to remove the collapsible menu from the footer on the mobile screen only. I want to add 2 columns in one row in flex design. Can anyone suggest the code? my code is below

{%- if block.type == ‘menu’ -%}
{%- liquid
assign column_class = ‘small-12 medium-4 large-2’
case block.settings.column_size
when ‘medium’
assign column_class = ‘small-12 medium-3’
when ‘large’
assign column_class = ‘small-12 medium-6’
endcase
-%}

{{ block.settings.title }} {%- if block.settings.menu != blank -%}
    {% for link in block.settings.menu.links %} {% assign has_sub_menu = false %} {% if link.links.size > 0 %} {% assign has_sub_menu = true %} {% endif %}
  • {{ link.title }}{% if has_sub_menu %}{%- render 'svg-icons' with 'thb-dropdown-bottom' -%}{% endif %} {% if has_sub_menu %}
      {% for l in link.links %} {% assign has_sub_menu = false %} {% if l.links.size > 0 %} {% assign has_sub_menu = true %} {% endif %}
    • {{ l.title }}{% if has_sub_menu %}{%- render 'svg-icons' with 'thb-dropdown-bottom' -%}{% endif %} {% if has_sub_menu %}
        {% for sub_link in l.links %} {% assign has_sub_menu = false %} {% if sub_link.links.size > 0 %} {% assign has_sub_menu = true %} {% endif %}
      • {{ sub_link.title }}
        • {% endfor %}
      {% endif %}
      • {% endfor %}
    {% endif %}
    • {% endfor %}
{%- endif -%}
{%- endif -%}
2

Hey @sanwal

{%- if block.type == 'menu' -%}
  {%- liquid
  assign column_class = 'small-12 medium-4 large-2'
  case block.settings.column_size
  when 'medium'
    assign column_class = 'small-12 medium-3'
  when 'large'
    assign column_class = 'small-12 medium-6'
  endcase
  -%}
  
    

      {%- if block.settings.title and block.settings.menu != blank -%}
        
{{ block.settings.title }}

      {%- endif -%}
      {%- if block.settings.menu != blank -%}
        
          

            {% for link in block.settings.menu.links %}
              - {{ link.title }}
              
            {% endfor %}
          

        

      {%- endif -%}
    

  

{%- endif -%}

Try this updated code.