title: Pushing HTML page to one side
body: <p>I'm trying to implement a sidebar to my Twitter Bootstrap 3 application. When I click a button, a fixed positioned <code>nav nav-pills nav-stacked</code> appears on the left side of my page. And I gave <code>z-index:1000</code>, so it appears on top of my content.  </p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/mavent/8YtDS/14/" rel="nofollow">http://jsfiddle.net/mavent/8YtDS/14/</a></p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
      &lt;div class="navbar-header"&gt; &lt;a class="navbar-brand navbar-left" href="/" title=""&gt;
          MyBrand
      &lt;/a&gt;
  
      &lt;/div&gt;
  &lt;/nav&gt;
  &lt;div class="col-md-3" id="mysidebar" style="  top: 0;bottom:0; left: 10px;
      position: fixed;     height: 100%;    background-color: #faff18;
      opacity: 0.9;    overflow: hidden;    z-index:1000;      margin: 0;  padding: 0; display:none;"&gt;
      &lt;div style="position: relative;  top: 60px;  background-color: #7d1c80; opacity: 0.9;"&gt;
          &lt;ul class="nav nav-pills nav-stacked"&gt;
              &lt;li&gt;&lt;a href=""&gt;Do something&lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Do something&lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Do something&lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Do something&lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Do something&lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Do something&lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Do something&lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Do something&lt;/a&gt;
  
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row" style="background-color: #aaa;"&gt;
      &lt;div class="col-md-offset-3"&gt;
          &lt;button&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/button&gt;
          &lt;button id="mybutton" type="button" class="btn btn-info"&gt;Click me to toggle&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I need different behaviour, when sidebar appears my page will be pushed to right side. Check this page and click top left button. How can I get this behaviour with css/js ?
  <a href="http://jpanelmenu.com/" rel="nofollow">http://jpanelmenu.com/</a></p>