Hey Guys!
I need coding help, the website store i am working on does not support landing page (parent page) links in mobile view, so all the 1’st level pages are not accessible when website is opened in mobile view.
How do I fix this?
Mobile menu code:
<header-drawer>
<details class="menu-drawer-container">
<summary class="header__icon header__icon--menu header__icon--summary" aria-label="{{ 'sections.header.menu' | t }}">
{% render 'icons', icon: 'hamburger', class: 'icon icon-hamburger', attr: 'width="32px"' %}
{% render 'icons', icon: 'close-bold', class: 'icon icon-close ms-1', attr: 'width="28px"' %}
</summary>
<div id="menu-drawer" class="menu-drawer motion-reduce" tabindex="-1">
<div class="menu-drawer__inner-container">
<div class="menu-drawer__navigation-container">
<nav class="menu-drawer__navigation">
<ul class="menu-drawer__menu list-menu" >
{%- for link in section.settings.menu.links -%}
{%- assign is_mega = false -%}
{%- for block in section.blocks -%}
{%- assign menu_item = menu_link.title -%}
{%- if block.settings.title contains menu_item -%}
{%- assign is_mega = true -%}
{% include 'header-megamenu' %}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- if is_mega == false -%}
<li>
{%- if link.links != blank -%}
<details>
<summary class="menu-drawer__menu-item list-menu__item{% if link.child_active %} menu-drawer__menu-item--active{% endif %}">
{{ link.title | escape }}
{% render 'icons', icon: 'arrow', class: "icon icon-arrow" %}
</summary>
<div id="link-{{ link.title | escape }}" class="menu-drawer__submenu motion-reduce" tabindex="-1">
<div class="menu-drawer__inner-submenu">
<button class="menu-drawer__close-button border-0 btn-secondary" aria-expanded="true">
{% render 'icons', icon: 'arrow', class: "icon icon-arrow" %}
{{ link.title | escape }}
</button>
<ul class="menu-drawer__menu list-menu" tabindex="-1">
{%- for childlink in link.links -%}
<li>
{%- if childlink.links == blank -%}
<a href="{{ childlink.url }}" class="menu-drawer__menu-item 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>
<summary class="menu-drawer__menu-item list-menu__item focus-inset">
{{ childlink.title | escape }}
{% render 'icons', icon: 'arrow', class: "icon icon-arrow" %}
</summary>
<div id="childlink-{{ childlink.title | handleize }}" class="menu-drawer__submenu motion-reduce">
<button class="menu-drawer__close-button border-0 btn-secondary" aria-expanded="true">
{% render 'icons', icon: 'arrow', class: "icon icon-arrow" %}
{{ childlink.title | escape }}
</button>
<ul class="menu-drawer__menu list-menu" tabindex="-1">
{%- for grandchildlink in childlink.links -%}
<li>
<a href="{{ grandchildlink.url }}" class="menu-drawer__menu-item list-menu__item focus-inset{% if grandchildlink.current %} menu-drawer__menu-item--active{% endif %}"{% if grandchildlink.current %} aria-current="page"{% endif %}>
{{ grandchildlink.title | escape }}
</a>
</li>
{%- endfor -%}
</ul>
</div>
</details>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</div>
</div>
</details>
{%- else -%}
<a href="{{ link.url }}" class="menu-drawer__menu-item list-menu__item{% if link.current %} menu-drawer__menu-item--active{% endif %}"{% if link.current %} aria-current="page"{% endif %}>
{{ link.title | escape }}
</a>
{%- endif -%}
</li>
{%- endif -%}
{%- endfor -%}
</ul>
</nav>
</div>
</div>
</div>
</details>
</header-drawer>