Fixing the off-canvas sidebar - html

Question

I have implemented the off-canvas sidebar template from Twitter Bootstrap in my project and made it fixed in small / medium 'view'. Problem is i'm trying to fix it for xs but it really just disappears.
How can i make it fixed properly?
css
html,
body {
max-width: 100%;
overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
padding-top: 70px;
}
.sidebar-offcanvas {
position: fixed;
top: 50px;
right: 0;
height: 100%;
width: 200px;
}
.sidebar-offcanvas, .sidebar-offcanvas a {
background-color: #ECF0F1;
border: none;
}
/*
* Off Canvas
* --------------------------------------------------
*/
#media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.row-offcanvas-right {
right: 0;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -50%; /* 6 columns */
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -50%; /* 6 columns */
}
.row-offcanvas-right.active {
right: 50%; /* 6 columns */
}
.row-offcanvas-left.active {
left: 50%; /* 6 columns */
}
.sidebar-offcanvas {
position: fixed;
top: 0;
width: 50%;
}
}
html
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9 col-md-10">
<my-notification></my-notification>
<div ui-view></div>
</div>
<div class="sidebar-offcanvas" id="sidebar">
<div class="list-group">
.. omitted
</div>
</div>
</div>
</div>

Answer 1

I'm not exactly sure what you were trying with your CSS but your problem is
.row-offcanvas-right
.sidebar-offcanvas {
right: -50%; /* 6 columns */
}
in combination with
.sidebar-offcanvas {
position: fixed;
top: 0;
width: 50%;
}
This causes the .sidebar-offcanvas to be 50% wide and then its right position starts at minus 50%. This causes the element effectively to disappear as it gets pushed out of the screen by its total width to the right. So dependent on what you want to achieve you need to change right: -50%; to something else like right: 0px; for instance.

Answer 2

default (via .show on .offcanvas). Offcanvas includes support for a header with a close button and an optional body class for some initial padding. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.