Bootstrap 3 off-canvas how to - html

Question

So i just don't get it.
I've looked for some good examples for off canvas in bootstrap 3 but i just don't get it. I have already set up my navigation but dun know how this off canvas works.
When i use a mobile device i want my toggled navigation to slide in from the right to the left over the whole browser screen with an "X" on the upper left corner to close this one again. So it's like : User clicks on the toggled Navigation -> Navigtion slides in from the right to the left over the whole screen -> Navigation is listed there -> click on an menu point and close the navigation with sliding out from left to right.
Anyone got any ideas ???? Really need help
My Navigation looks like this atm :
<header>
<div class="container-header hidden-xs">
<!-- Navigation -->
<div class="first-nav">
<form class="navbar-search">
<input type="text" class="search-query span3" placeholder="search">
</form>
<ul class="social-buttons" id="home">
<li><i class="fa fa-youtube fa-lg"></i></li>
<li><i class="fa fa-twitter fa-lg"></i></li>
<li><i class="fa fa-xing fa-lg"></i></li>
<li><i class="fa fa-rss fa-lg"></i></li>
</ul>
<a class="navbar-lang" href="#" title="English">Eng</a>
</div>
</div>
<div id="nav">
<div class="navbar navbar-default navbar-static" role="navigation">
<div class="second-nav">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-logo">
<img src="images/Logo_nav.png" alt="DnD">
</div>
<div class="navbar-collapse collapse">
<ul class="mainnav nav navbar-nav">
<li>Home</li>
<li>Leistungen</li>
<li>Über uns</li>
<li>Team</li>
<li class="dropdown">
Aktuelles<b class="caret"></b>
<ul class="dropdown-menu">
<li>Alle Artikel</li>
</ul>
</li>
<li>Kunden</li>
<li class="dropdown">
Jobs<b class="caret"></b>
<ul class="dropdown-menu">
<li>Alle Jobs</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
</div>
</div>
</div>
</div>
</header>

Answer 1

Correct me if I am wrong, but something like below should work:
#media screen and (max-width: 767px) {
.row-offcanvas-right.active {
right: calc(100% + 30px); /*30px to get row margin back (-15px + (-15px))*/
}
}