I've successfully integrated the off-canvas sidebar template from Twitter Bootstrap into my project and have fixed it for small/medium views. However, I'm experiencing some difficulties when trying to make it work properly for extra-small devices.
Is there a way to ensure that it remains fixed as intended?
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>