title: Why is my Bootstrap Sidebar overlapping my footer? Using stickynavbar.js
body: <p>When there are a certain number of items in my Bootstrap sidebar the sidebar overlaps with the footer content. I cannot just change the footers top margin or give the sidebar a bottom margin. Neither of these resolves the overlap. Also, I am using stickyNavbar.js which may be what is causing the overlay issue. If so, would this be solved by determining when the sidebar is activated and adding a margin to the footer? How would I detect this and make this change with StickyNavbar.js? <a href="http://www.jozefbutko.com/stickynavbar/" rel="nofollow noreferrer">http://www.jozefbutko.com/stickynavbar/</a></p>
  
  <p>Here is an image of the resulting issue:</p>
  
  <p><a href="https://i.stack.imgur.com/ZntEO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZntEO.png" alt="Sidebar Overlap"></a></p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="container" id="main-content" &gt;
  &lt;div class="row"&gt;
    &lt;div class="col-sm-12"&gt;
      &lt;div class="col-sm-4"&gt;
          &lt;div id="sidebar" class="hidden-xm" data-spy="affix" data-offset-top="100"&gt;
              &lt;nav class="leftnav"&gt;
                  &lt;ul class="nav nav-pills nav-stacked"&gt;
                      &lt;li&gt;&lt;a href="#/:introContent.asp"&gt;Jobs@IU&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#/:introContent.asp"&gt;Recruitment &amp; Outreach&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#/:introContent.asp"&gt;The Hiring Process&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#/:introContent.asp"&gt;Pre-posting steps&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#/:introContent.asp"&gt;Posting process&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#/:introContent.asp"&gt;Hiring proposals&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#/:introContent.asp"&gt;Closing the posting&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#/:introContent.asp"&gt;Temporary Hiring Process&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#/:introContent.asp"&gt;Student Employment&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#/:introContent.asp"&gt;Related Resources&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#/:introContent.asp"&gt;Employee Policies&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#/:introContent.asp"&gt;PeopleAdmin&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-8 ajaxContent"&gt;
      &lt;div ng-view&gt; &lt;/div&gt;
      &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Sidebar CSS: </p>
  
  <p>None, using default styles from bootstrap</p>
  
  <p>Footer CSS: </p>
  
  <pre><code>   .footerspan{ background-color:#4b3b32; padding-bottom: 50px; margin-top: 50px; }
  </code></pre>