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?

Hello! Nah, not the top navbar. I'm trying to widen the vertical sidebar menu that's on the right. — Kaori, Mar 18 '16 at 12:25

score 0 · Accepted Answer · answered Mar 18 '16 at 12:32

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

Thank you! Just what I needed. :) – Kaori Mar 18 '16 at 14:24 — Kaori, Mar 18 '16 at 14:24

Bootstrap 3 offcanvas navigation menu size

1 Answers1