title: Bootstrap offcanvas sidebar toggling for any canvas size
body: <p>Could you please explain how offcanvas sidebar toggling works?</p>
  
  <p>I can't make the actual sidebar disappear for sm. I can make the button visible (visible-sm), but toggling doesn't work - the sidebar is always visible.</p>
  
  <p>Toggling works for xs size, that's fine, but I want to make it work for sm the same way, or any other size for that matter.</p>
  
  <hr>
  
  <p><strong>Partial answer</strong>: Changing <code>max-width</code> in offcanvas.css makes toggling work for bigger sizes as well, sm in this case:</p>
  
  <pre><code>@media screen and (max-width: 991px) {
    /* 991px instead of 767px makes toggling work for sm as well */
  
    .row-offcanvas {
      /* ... */
    }
  
    /* and so on */
  }
  </code></pre>
  
  <p><strong>But</strong> there's still a problem - when canvas width is between 780 and 991px, the sidebar is visible even if it's toggled off. Any idea how to fix this?</p>
  
  <p><img src="https://i.stack.imgur.com/Szurk.png" alt="enter image description here"></p>
  
  <p>Thanks a lot</p>