The menu uses a toggle to drop down child pages. It’s then possible to navigate to a child page, but getting back to the parent page, or a different parent page is impossible, since each time, the slug is appended to the URL.
For example:
https://rogera25.sg-host.com/managing-epilepsy/women-and-epilepsy/
Within the Women and Epilepsy segment I can reach child pages like:
https://rogera25.sg-host.com/managing-epilepsy/women-and-epilepsy/pregnancy-planning/
But I can’t then go back to a different section like ‘Living With Epilepsy’ because this happens, resulting in a 404:
https://rogera25.sg-host.com/managing-epilepsy/women-and-epilepsy/pregnancy-planning/living-with-epilepsy
Can anyone help? Thanks so much for taking the time to read this!
<aside class="sub-menu col mx-auto">
<ul class="nav flex-column mx-2 menu">
{% set siblings = post_query({
'post_type': 'page',
'post_parent': ancestor,
'orderby': 'menu_order',
'order': 'ASC'
}) %}
<a class="nav-side-title {% if fn('is_page', ancestor.slug) %}active{% endif %}" href="{{ ancestor.link }}">
<h4>{{ ancestor_name }}</h4></a>
{% for sibling in siblings %}
{% if sibling.children %}
<div class="top mx-2 d-flex align-items-baseline">
<li class="nav-item top-parent has-child collapsed" href="#{{ sibling.slug }}" data-toggle="collapse" aria-controls="{{ sibling.title }}"></li>
<a class="nav-link {% if fn('is_page', sibling.slug) %}active{% endif %}" href="{{ sibling.slug }}">{{ sibling.title }}</a>
</div>
<ul id="{{ sibling.slug }}" class="collapse child-menu" aria-labelledby="{{ sibling.title }}">
{% for subpage in sibling.children %}
{% if subpage.post_type == "page" %}
{% if subpage.children %}
<div class="mx-3 d-flex align-items-baseline">
<li class="nav-item middle-parent has-child collapsed" href="#{{ subpage.slug }}" data-toggle="collapse" aria-controls="{{ subpage.title }}"></li>
<a class="nav-link subpage{% if fn('is_page', subpage.slug) %} active{% endif %}" href="{{ subpage.link }}">{{ subpage.title }}</a>
</div>
<ul id="{{ subpage.slug }}" class="grandchild-menu collapse" aria-labelledby="{{ subpage.title }}">
{% for subpage_2 in subpage.children %}
{% if subpage_2.post_type == "page" %}
<li class="nav-item bottom">
<a class="nav-link subpage{% if fn('is_page', subpage_2.slug) %} active{% endif %}" href="{{ subpage_2.link }}"> {{ subpage_2.title }}</a>
</li>
{% endif %}
{% endfor %}<!--subpage_2-->
</ul>
{% else %}<!--subpage.children-->
<li class="nav-item middle">
<a class="nav-link subpage{% if fn('is_page', subpage.slug) %} active{% endif %}" href="{{ subpage.link }}">{{ subpage.title }}</a>
</li>
{% endif %} <!--subpage.children-->
{% else %}
<li class="nav-item middle">
<a class="nav-link subpage{% if fn('is_page', subpage.slug) %} active{% endif %}" href="{{ subpage.link }}">{{ subpage.title }}</a>
</li>
{% endif %}<!--subpage.children page-->
{% endfor %} <!--subpage-->
</ul>
{% else %} <!--sibling.children-->
<li class="nav-item top">
<a class="nav-link {% if fn('is_page', sibling.slug) %} active{% endif %}" href="{{ sibling.link }}">{{ sibling.title }}</a>
</li>
{% endif %}<!--sibling.children-->
{% endfor %} <!--sibling-->
</ul>
</aside>