Hi guys,
I am trying to create a temporary fix for our navigation system. It requires that I have two separate navigation menus (one mobile, one desktop). I am re-using the menu I have had for our mobile users,
and I have created a new menu for our desktop users.
I am having one heck of a time deciphering what is going on in the navigation panel template as far as the loops and where closing tags are supposed to be. Throw in me trying to integrate our new menu with the old bootstrap mobile menu and you get completely broken HTML.
So I decided to just run the {forEach navlink}
loop twice. Once to create our new desktop menu, and once to display our old mobile menu markup. I then use Bootstrap’s classes to hide one or the other based on the window size.
So, herein lies my issue… Each menu works just fine until I try to use them both in the same template (I use two separate {forEach navlink}
loops in the same template). Each loop (when used independently) works fine and display their respective menu as expected. But as soon as I paste the other menu into the template, the menus break. There HTML breaks (not CSS).
Attached is my Navigation Panel template. Unless I am missing something, I am assuming that I am not able to use this loop more than once within the same template…? Things break if I do right? Because (as I mentioned) each set of markup works fine as lone as the other menu is not being displayed in the same template…