off canvas menu in container with bootstrap - angularjs

Question

I'm trying to build an "off canvas menu" like that on www.bikepacking.com,
but I'm struggling with using this in a container.
I use Bootstrap with QuantumUI and without jQuery.
My approach is something like this:
<div class="container wrapper">
<rw-navigation>
</rw-navigation>
<div class="brandbar">
<input type="checkbox" id="nav-trigger" class="nav-trigger"/>
<label for="nav-trigger"></label>
</div>
<div class="content">
<header>
</header>
<div ui-view=""></div>
<footer>
<p>© 2015 {{'footer.copyright' | translate}}</p>
</footer>
</div>
</div>
With some styles like this:
div.container.wrapper{
position: relative;
overflow: hidden;
.navigation{
position: absolute;
top: 0;
bottom: 0;
height: 100%;
left: 0;
width: 256px;
#include transition(left, 0.5s, ease);
background: #111;
color: white;
}
.brandbar{
position:absolute;
top: 50px;
left:0;
#include transition(left, 0.5s, ease);
}
.content {
overflow: hidden;
position: relative;
width: auto;
bottom: 100%;
left: 0;
}
}
The .navigation class is applied in the template of the rwNavigation directive with replace: true.
It doesn't work and I don't know why.

Answer 1

OK,
Now I got some tima at work for that problem.
THX# Sitepoint for this tutorial which gave me the right direction:
http://www.sitepoint.com/pure-css-off-screen-navigation-menu/
BUt I had to change form position:fixed to position:absolute, because position:fixed only refer to the window and position:absolute refer to prant position:relative element (or windows if there isnt a parent postion:relative element)
And here is a plnkr with the solution for a boxed off canvas menu
http://plnkr.co/edit/OdkXXkhGzKLd0qi2RZ4h?p=preview