• Skip to primary navigation
  • Skip to main content
  • Skip to footer

JH Tech Services

A knowledgebase

  • Portfolio
  • Knowledgebase
  • About

Bootstrap 3 multiple collapsible nav menus

September 15, 2013 by jer0dh

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 }}
  • HTML
  • Knowledgebase

Footer

  • Portfolio
  • Knowledgebase
  • About

© 2023