title: How to add auto scroll bar vertically to cssbootstrap affix menu for smaller screens?
body: <p>I am using css bootstrap <a href="http://getbootstrap.com/javascript/#affix" rel="nofollow noreferrer">affix plugin</a> as a sticky menu on my site.</p>
  
  <p>I have lots of items on the menu which is not an issue on a desktop. However, when I view my site on a small laptop, the bottom half of my menu get cut off. </p>
  
  <p>I need to add an auto scroll bar to the menu when the screen is small.</p>
  
  <p>Here is my html code</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
  
          &lt;nav class="col-sm-3 scrollspy hidden-xs hidden-sm" id="docs-menu-column"&gt;
  
              &lt;ul class="nav nav-pills nav-stacked scrollspy affix-menu" id="docs-menu" data-spy="affix"&gt;
  
                  &lt;li&gt;
                    &lt;strong&gt;Code Generator&lt;/strong&gt;
                    &lt;ul class="nav"&gt;
                      &lt;li&gt;&lt;a href="#introduction"&gt;Introduction&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#features"&gt;Features&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#dependencies"&gt;Dependencies&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                    &lt;strong&gt;Getting Started&lt;/strong&gt;
                    &lt;ul class="nav"&gt;
                      &lt;li&gt;&lt;a href="#installation"&gt;Installation&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#features"&gt;Features&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#available-commands"&gt;Available Command&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                    &lt;strong&gt;How To&lt;/strong&gt;
                    &lt;ul class="nav"&gt;
                      &lt;li&gt;&lt;a href="#how-to-create-views-layout"&gt;How to create a "views-layout"&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#how-to-create-resource"&gt;How to create a resource&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#how-to-create-controller"&gt;How to create a controller&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#how-to-create-model"&gt;How to create a model&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#how-to-create-routes"&gt;How to create routes&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#how-to-create-views"&gt;How to create all standard CRUD views&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#how-to-create-create-view"&gt;How to create a "create-view"&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#how-to-create-edit-view"&gt;How to create a "edit-view"&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#how-to-create-index-view"&gt;How to create a "index-view"&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#how-to-create-show-view"&gt;How to create a "show-view"&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#how-to-create-form-view"&gt;How to create a "form-view"&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#how-to-create-migration"&gt;How to create a database migration&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#how-to-create-form-request"&gt;How to create form-request&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#how-to-create-language"&gt;How to create a language file&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                    &lt;strong&gt;Fields&lt;/strong&gt;
                    &lt;ul class="nav"&gt;
                    &lt;li&gt;&lt;a href="#model-fields-overview"&gt;Overview&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#model-fields-json"&gt;Creating fields from JSON file&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#model-fields-raw"&gt;Creating fields from a raw string&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/li&gt;
  
              &lt;/ul&gt;
  
          &lt;/nav&gt;
  
  
          &lt;div class="col-md-9 large-padding-sections" id="docs-main-column"&gt;
  
              //Sections goes here.....
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried adding <code>style="overflow-y: auto !important;"</code> to the <code>&lt;nav class="col-sm-3 scrollspy hidden-xs hidden-sm" id="docs-menu-column"</code> but that did not work.</p>
  
  <p>How can I correctly add a scroll bar vertically to the <code>nav</code> on the left if the screen is not high enough to show the entire affix menu?</p>