title: Bootstrap horizontal to vertical navigation
body: <p>I am looking for a way to make a horizontal navigational row of drop down menu items convert to a vertically stacked nav that would act/function like an accordion upon entering a smaller breakpoint. </p>
  
  <p>I <strong>don't</strong> want this menu group to be converted to the burger menu, but rather prefer it to simply stack like an accordion with collapse functionality on the smaller breakpoint (to the width of it's container).</p>
  
  <p>I have searched many sites/videos and for some reason I am having a difficult time making this work (again, largely due to my lack of bootstrap knowledge). </p>
  
  <p>I'm confused if this should be handled by a media query in the css, or maybe a javascript function or a combination of some sort? Also, should I set this up using a different navigation method other than Bootstrap's "pill" navigation style?</p>
  
  <p>AGGGGHHH (insert brain explosion sound here)! :)</p>
  
  <p>I've attached my working HTML code below. If anyone has a suggestion or can point me in the right direction of a solution I would appreciate it!</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Nav-Testing&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"&gt;  
  
  &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
  
  &lt;section class= "container" id="mast-container"&gt;
          &lt;div class="row"&gt;
      &lt;div class="col-lg-8 navbar-collapse collapse"&gt;
                  &lt;ul class="nav nav-pills" id="main-nav" role="navigation"&gt;
                      &lt;li role="presentation" class="dropdown"&gt;
                      &lt;a class="dropdown-toggle-main" data-toggle="dropdown" href="#" role="button" aria-expanded="false"&gt;
                      ITEM 1&lt;br&gt;&lt;span class="glyphicon glyphicon-menu-down"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;ul class="dropdown-menu main-nav" role="menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Dropdown Item1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Dropdown Item2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Dropdown Item3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Dropdown Item4&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                      &lt;/li&gt;&lt;!--/ITEM 1 --&gt;
  
              &lt;li role="presentation" class="dropdown"&gt;
                      &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false"&gt;
                      ITEM 2&lt;br&gt;&lt;span class="glyphicon glyphicon-menu-down"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;ul class="dropdown-menu main-nav" role="menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Dropdown Item1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Dropdown Item2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Dropdown Item3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Dropdown Item4&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                      &lt;/li&gt;&lt;!--/ITEM 2 --&gt;
  
  
              &lt;li role="presentation" class="dropdown"&gt;
                      &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false"&gt;
                      ITEM 3&lt;br&gt;&lt;span class="glyphicon glyphicon-menu-down"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;ul class="dropdown-menu main-nav" role="menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Dropdown Item1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Dropdown Item2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Dropdown Item3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Dropdown Item4&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                      &lt;/li&gt;&lt;!--/ITEM 3 --&gt;
  
  
  
              &lt;li role="presentation" class="dropdown"&gt;&lt;!--RESEARCH main-nav --&gt;
                      &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false"&gt;
                      ITEM 4&lt;br&gt;&lt;span class="glyphicon glyphicon-menu-down"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;ul class="dropdown-menu main-nav" role="menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Dropdown Item1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Dropdown Item2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Dropdown Item3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Dropdown Item4&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                      &lt;/li&gt;&lt;!--/ITEM 4 --&gt;
  
                      &lt;li role="presentation" class="dropdown"&gt;
                      &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false"&gt;
                      ITEM 5&lt;br&gt;&lt;span class="glyphicon glyphicon-menu-down"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;ul class="dropdown-menu main-nav" role="menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Dropdown Item1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Dropdown Item2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Dropdown Item3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Dropdown Item4&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                      &lt;/li&gt;&lt;!--/ITEM 5 --&gt;
          &lt;/ul&gt;
              &lt;/div&gt;&lt;!--/main-nav--&gt;
          &lt;/div&gt;&lt;!--/row--&gt;
      &lt;/section&gt;
  
  
  
  
  &lt;!-- javascript --&gt;
      &lt;script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>