Bootstrap 3 multiple collapsible nav menus

· 1 min read

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 }}