Solved: bootstrap left nav overlap on mobile device

I am EXTREMELY new to bootstrap. I found code for a fixed left nav that works awesome on a desktop and laptop, but on a mobile device the body overlaps the left nav. Any suggestions:

&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;

  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-responsive.css" rel="stylesheet"&gt;  
&lt;/head&gt;
&lt;body&gt;
&lt;!-- left nav --&gt;
  &lt;div class="col-sm-2"&gt;
      &lt;ul class="nav nav-stacked affix" id="sidebar"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Hello&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;About Caroline&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;The Studio&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Testimonials&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Inspiration&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;!-- end left nav --&gt;

      &lt;div class="col-sm-7"&gt;
          &lt;div class="row"&gt; &lt;!-- body content here --&gt;
                 blah blah
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;

Open in new window