Bootstrap 3 multiple collapsible nav menus

Needed two menus. A fixed top and then a nav below the logo in a template. Found that they would interfere with each other. Discovered that in the sample code for a single collapsible menu, the button to collapse had a data-target attribute set to the class “navbar-collapse” which is another child div in the .container div. My first attempt was to change the data-target and class for one of the collapsible menus. I changed navbar-collapse to catbar-collapse

This initially seemed to work except the responsiveness wasn’t working well. The menu would not re-appear after changing the window size.

Instead, I added a class to the navbar-collapse div and in the data-target attribute used that new class. Worked! Here is the working code for the second menu.

      

        
          
          
          
        
      
      

	   

		
Home
		{{ #foreach ( $level1cat in $utilities.getcategoriesbyparentid(0)) }}
		{{ #if( $level1cat.subcategorycount > 0 ) }}
		

		  {{ $level1cat.name }}   
          

			{{ #foreach ( $level2cat in $utilities.getcategoriesbyparentid($level1cat.id)) }}

			  
 {{ $level2cat.name }}
			  
			{{ #end }}
		  
		{{ #else }}
		 
{{ $level1cat.name }} 
 
	 {{ #end }}
	   {{ #end }}