Bootstrap 3 offcanvas navigation menu size

Question

I'm trying to change the size of the offcanvas navigation menu for small screens, as it's too narrow for me. I've tried changing it to col-xs-12, but it still doesn't work when toggling... https://getbootstrap.com/examples/offcanvas/

Does anyone know how to change it?

Answer 1

You change the custom CSS for the sidebar from the example to the desired width. In the example it's 50% of the screen width. To increase it to 60%..

.row-offcanvas-right
  .sidebar-offcanvas {
    right: -60%;
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -60%;
  }

  .row-offcanvas-right.active {
    right: 60%; 
  }

  .row-offcanvas-left.active {
    left: 60%; 
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 60%; 
  }

http://www.codeply.com/go/6iCdd2Wega