Impulse theme: Stop children auto displaying on menu dropdown on mobile

[cybko]

When someone clicks the menu dropdown on the mobile, it auto expands all branches

How can I prevent this so it displays collapsed originally?

I assume it's something to do with:

class="mobile-nav__link--button mobile-nav__link--top-level collapsible-trigger collapsible--auto-height{% if link.active or link.child_active %} is-open{% endif %}">

But I just can't work out exactly which one should be is-closed

[LitCommerce]

Hi @cybko,

Please send your site and if your site is password protected, please send me the password. I will check it.

[LitCommerce]

Hi @cybko,

Please change code:

class="mobile-nav__link--button mobile-nav__link--top-level collapsible-trigger collapsible--auto-height{% if link.active or link.child_active %} is-open{% endif %}">

=>

class="mobile-nav__link--button mobile-nav__link--top-level collapsible-trigger collapsible--auto-height">

Hope it helps!

[cybko]

Thank you so much for having a look. It didn't work though unfortunately.

[LitCommerce]

Hi @cybko,

Can you send me the full code of the file? I will help you to check and change it because it still needs to be changed at another location.

The code is displayed at: 'mobile-nav__sublist collapsible-content collapsible-content--all '

[cybko]

Absolutely, will send

[cybko]

{%- if has_dropdown -%}
<div id="Linklist-{{ child_list_handle }}"
class="mobile-nav__sublist collapsible-content collapsible-content--all{% if link.active or link.child_active %} is-open{% endif %}"
{% if link.active or link.child_active %}style="height: auto;"{% endif %}>
<div class="collapsible-content__inner">
<ul class="mobile-nav__sublist">
{%- for childlink in link.links -%}
{%- assign has_sub_dropdown = false -%}
{%- assign grand_child_list_handle = childlink.url | handleize | append: forloop.index -%}
{%- if childlink.links != blank -%}
{%- assign has_sub_dropdown = true -%}
{%- endif -%}

<li class="mobile-nav__item">
<div class="mobile-nav__child-item">
{%- if childlink.url == '#' and has_sub_dropdown -%}
<button type="button"
aria-controls="Sublinklist-{{ child_list_handle }}-{{ grand_child_list_handle }}"{% if childlink.active or childlink.child_active %} aria-open="true"{% endif %}
class="mobile-nav__link--button collapsible-trigger{% if childlink.active or childlink.child_active %} is-open{% endif %}">
<span class="mobile-nav__faux-link"{% if childlink.active %} data-active="true"{% endif %}>{{ childlink.title | escape }}</span>
{%- render 'collapsible-icons-alt' -%}
</button>
{%- else -%}
<a href="{{ childlink.url }}"
class="mobile-nav__link"
id="Sublabel-{{ grand_child_list_handle }}"
{% if childlink.active %}data-active="true"{% endif %}>
{{ childlink.title | escape }}
</a>
{%- endif -%}
{%- if childlink.url != '#' and has_sub_dropdown -%}
<button type="button"
aria-controls="Sublinklist-{{ child_list_handle }}-{{ grand_child_list_handle }}"
aria-labelledby="Sublabel-{{ grand_child_list_handle }}"
class="collapsible-trigger{% if childlink.active or childlink.child_active %} is-open{% endif %}">
{%- render 'collapsible-icons-alt' -%}
</button>
{%- endif -%}
</div>

{%- if has_sub_dropdown -%}
<div
id="Sublinklist-{{ child_list_handle }}-{{ grand_child_list_handle }}"
aria-labelledby="Sublabel-{{ grand_child_list_handle }}"
class="mobile-nav__sublist collapsible-content collapsible-content--all{% if childlink.active or childlink.child_active %} is-open{% endif %}"
{% if childlink.active or childlink.child_active %}style="height: auto;"{% endif %}>
<div class="collapsible-content__inner">
<ul class="mobile-nav__grandchildlist">
{%- for grandchildlink in childlink.links -%}
<li class="mobile-nav__item">
<a href="{{ grandchildlink.url }}" class="mobile-nav__link"{% if grandchildlink.active %} data-active="true"{% endif %}>
{{ grandchildlink.title }}
</a>
</li>
{%- endfor -%}
</ul>
</div>
</div>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</div>
</div>
{%- endif -%}

[LitCommerce · Accepted solution]

Hi @cybko,

Please change all code:

{%- if has_dropdown -%}
<div id="Linklist-{{ child_list_handle }}"
     class="mobile-nav__sublist collapsible-content collapsible-content--all">
  <div class="collapsible-content__inner">
    <ul class="mobile-nav__sublist">
      {%- for childlink in link.links -%}
      {%- assign has_sub_dropdown = false -%}
      {%- assign grand_child_list_handle = childlink.url | handleize | append: forloop.index -%}
      {%- if childlink.links != blank -%}
      {%- assign has_sub_dropdown = true -%}
      {%- endif -%}

      <li class="mobile-nav__item">
        <div class="mobile-nav__child-item">
          {%- if childlink.url == '#' and has_sub_dropdown -%}
          <button type="button"
                  aria-controls="Sublinklist-{{ child_list_handle }}-{{ grand_child_list_handle }}"{% if childlink.active or childlink.child_active %} aria-open="true"{% endif %}
                  class="mobile-nav__link--button collapsible-trigger">
            <span class="mobile-nav__faux-link"{% if childlink.active %} data-active="true"{% endif %}>{{ childlink.title | escape }}</span>
            {%- render 'collapsible-icons-alt' -%}
          </button>
          {%- else -%}
          <a href="{{ childlink.url }}"
             class="mobile-nav__link"
             id="Sublabel-{{ grand_child_list_handle }}"
             {% if childlink.active %}data-active="true"{% endif %}>
            {{ childlink.title | escape }}
          </a>
          {%- endif -%}
          {%- if childlink.url != '#' and has_sub_dropdown -%}
          <button type="button"
                  aria-controls="Sublinklist-{{ child_list_handle }}-{{ grand_child_list_handle }}"
                  aria-labelledby="Sublabel-{{ grand_child_list_handle }}"
                  class="collapsible-trigger">
            {%- render 'collapsible-icons-alt' -%}
          </button>
          {%- endif -%}
        </div>

        {%- if has_sub_dropdown -%}
        <div
             id="Sublinklist-{{ child_list_handle }}-{{ grand_child_list_handle }}"
             aria-labelledby="Sublabel-{{ grand_child_list_handle }}"
             class="mobile-nav__sublist collapsible-content collapsible-content--all">
          <div class="collapsible-content__inner">
            <ul class="mobile-nav__grandchildlist">
              {%- for grandchildlink in childlink.links -%}
              <li class="mobile-nav__item">
                <a href="{{ grandchildlink.url }}" class="mobile-nav__link"{% if grandchildlink.active %} data-active="true"{% endif %}>
                  {{ grandchildlink.title }}
                </a>
              </li>
              {%- endfor -%}
            </ul>
          </div>
        </div>
        {%- endif -%}
      </li>
      {%- endfor -%}
    </ul>
  </div>
</div>
{%- endif -%}

Hope it helps!

[cybko]

Amazing. Thank you so much!

[wickedbride]

Hi LitCommerce -

I'm attempting to do the same thing, where on mobile, the mega menu is collapsed (right now, it shows all links) - for the life of me, can't figure out where to put this code - I've looked in all my templates and can't find anything similar to replace. If you have a moment, can you help? Maybe since the template has been updated since this post, it's in a menu somewhere and I'm missing it? 

Thanks!