title: Bootstrap sidebar navigation resizing issues
body: <p>I'm having some issues with my Bootstrap 3.3.6 sidebar navigation. </p>
  
  <p><strong>Problem #1 -</strong>
  When in mobile view the content does not want to follow padding-top: 70px to be positioned lower under the fixed-top navigation bar. This occurs when the sidebar (left hand side) turns into standard Bootstrap top navigation. </p>
  
  <p><strong>Problem #2 -</strong>
  Half of the sidebar navigation only shows up when the screen is not mobile/desktop. So somewhere in the Tablet category you only get half of the sidebar.</p>
  
  <p><strong>Problem #3 -</strong> Grids don't want to display 2 blocks in mobile view, instead it's only one block. As shown in Problem 1 image.</p>
  
  <p><a href="https://i.stack.imgur.com/oVybr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oVybr.png" alt="enter image description here"></a></p>
  
  <p>Here is the JSFiddle <strong><a href="https://jsfiddle.net/fdkdvr2b/1/" rel="nofollow noreferrer">https://jsfiddle.net/fdkdvr2b/1/</a></strong></p>
  
  <pre><code>$(document).ready(function () {
      htmlbodyHeightUpdate()
      $( window ).resize(function() {
          htmlbodyHeightUpdate()
      });
      $( window ).scroll(function() {
          height2 = $('.main').height()
          htmlbodyHeightUpdate()
      });
  </code></pre>
  
  <p>^ Had to put above as Stackoverflow did not want to allow me to submit JSFiddle without code. But you will find all code in the JSFiddle. (css, html &amp; js)</p>
  
  <p>And here is embeded code where you can see results (fullscreen) <strong><a href="https://jsfiddle.net/fdkdvr2b/1/embedded/" rel="nofollow noreferrer">https://jsfiddle.net/fdkdvr2b/1/embedded/</a></strong></p>