header_2.html

<nav class="menu-nav navbar navbar-expand-lg p-0">
   <button class="navbar-toggler collapsed w-100 d-lg-none d-flex justify-content-center align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   <i class="fa-solid fa-bars navbar-toggler-icon me-1"></i>
   <b>Store Menu</b>
   </button>
   <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav w-100 d-flex flex-column">
         {% for category in store.categories %}
         {% if category.subcategories|length > 0 %}
         <li class="nav-collapse">
            <a class="nav-link text-shadow" href="#" data-toggle="collapse" data-target="#navCollapse{{ category.id }}" aria-expanded="false">
            {{ category.name }}<i class="fa-solid fa-caret-down ms-1"></i>
            </a>
            <div class="collapse" id="navCollapse{{ category.id }}">
               <div class="">
                  {% for subcategory in category.subcategories %}
                  {% if category.id !=  subcategory.id%}
                  <a class="dropdown-item {% if category.active %}active{% endif %}" href="/category/{{ subcategory.id }}">{{ subcategory.name }}</a>
                  {% endif %}
                  {% endfor %}
               </div>
            </div>
         </li>
         {% else %}
         <li class="nav-item {% if category.active %}active{% endif %}">
            <a class="nav-link {% if page.active %}active{% endif %}" href="/category/{{ category.id }}">{{
            category.name }}</a>
         </li>
         {% endif %}
         {% endfor %}
         {% for page in store.pages %}
         
         <li class="nav-item">
        <a class="nav-link {% if page.active %}active{% endif %}" href="/{{ page.slug }}">{{ page.title }}</a>
      </li>
         {% endfor %}
      </ul>
   </div>
</nav>