How to define collapsible hamburger menu in Bootstrap 3?

Question

I've been playing around with my nav bar and menu set up, but can't seem to get the Hamburger menu to trigger when I re-size my browser window.

My attempt below, where I defined the data toggle and set it's target to the main nav bar didn't work when re-sizing the browser.

Question:

Does anyone know why the hambuger menu isn't triggering on re-size with this markup?

<header>
  <div class="container-fluid">

    //Defined the toggle here, pointing it's data-target to the navBarCollapsable main nav bar.
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navBarCollapsable">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <div class="collapse navbar-collapse" id="navBarCollapsable">
      <nav>
        <ul id="menu" class="nav navbar-nav">
          <li><a>Selection:</a></li>
          <li>
            <a>Assets <span class="arrow">&#9660</span></a>
            <ul class="sub-menu">
              <li>
                <a href="#" class="small" data-value="option1" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 1</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option2" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 2</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option3" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 3</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option4" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 4</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option5" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 5</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option6" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 6</a>
              </li>
            </ul>
          </li>

          <li>
            <div class="horizontalgap" style="width:10px"></div>
          </li>
          <li><a>Profile:</a></li>
          <li>
            <a>Assets <span class="arrow">&#9660</span></a>
            <ul class="sub-menu">
              <li>
                <a href="#" class="small" data-value="option1" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 1</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option2" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 2</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option3" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 3</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option4" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 4</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option5" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 5</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option6" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 6</a>
              </li>
            </ul>
          </li>
          <li>
            <div class="horizontalgap-md"></div>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>

Answer 1

Your tag should come immediately after tag. Also make sure that your jquery.js file is loaded before bootstrap.js.

Answer 2

If you take a look at this code http://codepen.io/macsupport/pen/bKFzD you will see that both his menu types are included in the nav tag so try wrapping both your normal menu and your hamburger menu with <nav>