Attached is my navigation template. I had to modify the template so that I could wrap all child elements of the ‘Department Group’ with a <div> that is used (along with other elements) to make-up a hover menu.
After dissecting the behavior of the {forEach navlink} loop, and learning how it works, I made some modifications. It makes no sense why my template is not displaying these elements (menu items) how I want. The first three menu items in the attached HTML show how these elements should be nested (somewhat). Just take a look, you’ll see what I’m trying to do…
I cannot make any logical conclusion as to what is breaking where, but there is very little difference here from the default menu, which had “dummy” elements in extremely odd places so that the closing tags could be placed in front of the first opening tags???
Is there no way to simply use the following?:
{forEach DepartmentGroup}
<div class="department-group">
Department Group
{forEach Department}
<div class="department">
Department
{forEach category}
<div class="category">
Category
{forEach subcategory}
<div class="subcategory">
SubCategory
</div>
{endForEach}
</div>
{endForEach}
</div>
{endForEach}
</div>
{endForEach}