title: Offcanvas Sidebar With Bootstrap 3
body: <p><a href="https://i.stack.imgur.com/b7zt0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b7zt0.png" alt="Offcanvas Sidebar"></a></p>
  
  <p><strong>My goal:</strong></p>
  
  <p>Using Boostrap 3, create a sidebar menu with independent scrolling.  The toggle button needs to be in the fixed nav header.  <a href="https://semantic-ui.com/" rel="nofollow noreferrer">Semantic UI</a> has the exact behavior I'm looking for.  I'd prefer to do this without the use of plugins.</p>
  
  <p><br></p>
  
  <p><strong>Things I've tried:</strong></p>
  
  <ul>
  <li><a href="http://www.jasny.net/bootstrap/examples/navmenu-reveal/" rel="nofollow noreferrer">Jansy Bootstrap Offcanvas Reveal Sidebar</a>  
  
  <ul>
  <li><em>Main Issue</em>: on menu toggle, the page always scrolls to the top.  I need it to NOT scroll 
  <br><a href="https://i.stack.imgur.com/Nl7VKm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Nl7VKm.png" alt="jansy bootstrap"></a></li>
  </ul></li>
  </ul>
  
  <p><br></p>
  
  <ul>
  <li><a href="https://getbootstrap.com/examples/offcanvas/" rel="nofollow noreferrer">Bootstrap Offcanvas Example</a>
  
  <ul>
  <li><em>Main Issue</em>: On menu toggle, the menu doesn't always show.  I need it to automatically it's top value so it shows under the fixed nav 
  <br><a href="https://i.stack.imgur.com/RqWTzm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RqWTzm.png" alt="Toggle Nav"></a></li>
  </ul></li>
  </ul>