title: How can I make a fixed vertical nav bar float to the top when the window shrinks?
body: <p>The vertical nav css I am currently using:</p>
  
  <pre><code>.vertical-nav {
       position: fixed;
       top: 105px; /* distance to the top of the menu div from the top of the page */
       width:130px; /* width of the menu div */
       height: auto;
       margin: 0;
       padding: 5px;
       border: 2px solid #0000FF; /* border width, type and color*/
       border-radius: 10px; /* border-radius */         
       background: rgba(0,0,0, 0.5); /* Menu background color with opacity - delete if not required */
  }
  
  // Element with the CSS attached
  &lt;div class="sidebar-nav vertical-nav"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Currently, the vertical nav bar on the left side of the page stays fixed when I make my window smaller which makes it a bit awkward for the user. Like a bootstrap navbar, I would like the navbar to float to the top when the user adjusts the window.</p>
  
  <p>Any ideas?</p>
  
  <p>Actual code:</p>
  
  <pre><code> &lt;div class="sidebar-nav vertical-nav"&gt;
      &lt;div class="navbar navbar-default" role="navigation"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"&gt;
            &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;span class="visible-xs navbar-brand"&gt;Sidebar menu&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="navbar-collapse collapse sidebar-navbar-collapse"&gt;
          &lt;ul class="nav navbar-nav demo"&gt;
            &lt;li&gt;
              &lt;center&gt;&lt;label&gt;FILTER&lt;/label&gt;&lt;/center&gt;
            &lt;/li&gt;
          &lt;/br&gt;
            &lt;li class="active"&gt;&lt;center&gt;&lt;input type="checkbox"/&gt;  1&lt;/center&gt;&lt;/li&gt;
            &lt;/br&gt;
            &lt;li class="active"&gt;&lt;center&gt;&lt;input type="checkbox"/&gt;  2&lt;/center&gt;&lt;/li&gt;
            &lt;/br&gt;
            &lt;li class="active"&gt;&lt;center&gt;&lt;input type="checkbox"/&gt; 3&lt;/center&gt;&lt;/li&gt;
            &lt;/br&gt;
            &lt;li class="active"&gt;&lt;center&gt;&lt;input type="checkbox"/&gt;  4&lt;/center&gt;&lt;/li&gt;
            &lt;/br&gt;
            &lt;li class="active"&gt;&lt;center&gt;&lt;input type="checkbox"/&gt;  5&lt;/center&gt;&lt;/li&gt;
            &lt;/br&gt;
            &lt;li class="active"&gt;&lt;center&gt;&lt;input type="checkbox"/&gt;  6&lt;/center&gt;&lt;/li&gt;
            &lt;/br&gt;
            &lt;li class="active"&gt;&lt;a href="#"&gt;7&lt;/a&gt;&lt;/li&gt;
            &lt;/br&gt;
            &lt;li class="active"&gt;&lt;a href="#"&gt;8&lt;/a&gt;&lt;/li&gt;
  
  
            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                &lt;li class="divider"&gt;&lt;/li&gt;
                &lt;li class="dropdown-header"&gt;Nav header&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
  
            &lt;li&gt;&lt;a href="#"&gt;Reviews &lt;span class="badge"&gt;1,118&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
        &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>