Hi! I'm trying to edit my Dawn Themed website's navigation hamburger menu on mobile. I'm still new at this so I appreciate the help.
Problem: I want all the collapsible menus to stay open (child and grandchild links) and visible when hamburger menu is clicked. Currently it looks correct in the first click. But when I close the hamburger menu and reopen, I realize that the class of the becomes empty.
It goes from <details class="menu-opening" open> to <details class> when I reopen the menu.
I am manually adding the class="menu-opening" open portion to the code. Maybe that's where I am messing it up, but I'm not sure. Below is the portion of my code. Can you help me please?
<ul class="menu-drawer__menu list-menu" role="list">
{%- for link in section.settings.menu.links -%}
<li>
{%- if link.links != blank -%}
<details class="menu-opening" open>
<summary class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.child_active %} menu-drawer__menu-item--active{% endif %}">
{{ link.title | escape }}
{% comment %} {% render 'icon-arrow' %}
{% render 'icon-caret' %}{% endcomment %}
</summary>
<div id="link-{{ link.title | escape }}" class="menu-drawer__submenu motion-reduce" tabindex="-1">
<div class="menu-drawer__inner-submenu">
{% comment %} <button class="menu-drawer__close-button link link--text focus-inset" aria-expanded="true">
{% render 'icon-arrow' %}
{{ link.title | escape }}
</button> {% endcomment %}
<ul class="menu-drawer__menu list-menu" role="list" tabindex="-1">
{%- for childlink in link.links -%}
<li>
{%- if childlink.links == blank -%}
<a href="{{ childlink.url }}" class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if childlink.current %} menu-drawer__menu-item--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
{{ childlink.title | escape }}
</a>
{%- else -%}
<details class="menu-opening" open>
<summary class="menu-drawer__menu-item link link--text list-menu__item focus-inset">
{{ childlink.title | escape }}
{% comment %} {% render 'icon-arrow' %}
{% render 'icon-caret' %} {% endcomment %}
</summary>
<div id="childlink-{{ childlink.title | escape }}" class="menu-drawer__submenu motion-reduce">
{% comment %} <button class="menu-drawer__close-button link link--text focus-inset" aria-expanded="true">
{% render 'icon-arrow' %}
{{ childlink.title | escape }}
</button> {% endcomment %}
<ul class="menu-drawer__menu list-menu" role="list" tabindex="-1">
{%- for grandchildlink in childlink.links -%}
<li>
{% assign collection_handle = grandchildlink.url | split: "collections/" | last %}
{%- assign current_collection = collections[collection_handle] -%}
{%- if grandchildlink.title == "Sweet" -%} {% render 'icon-blue-circle' %} {% endif %}
{%- if grandchildlink.title == "Savory" -%} {% render 'icon-yellow-circle' %} {% endif %}
{%- if grandchildlink.title == "Spicy" -%} {% render 'icon-pink-circle' %} {% endif %}
<a href="{{ grandchildlink.url }}" class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if grandchildlink.current %} menu-drawer__menu-item--active{% endif %}"{% if grandchildlink.current %} aria-current="page"{% endif %} style="padding-left:0px;">
{{ grandchildlink.title | escape }} ({{ current_collection.all_products_count }})
</a>
</li>
{%- endfor -%}
</ul>
</div>
</details>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
