I'm really struggling to understand how to implement off-canvas functionality in Bootstrap 3. I've searched for examples, but I just can't seem to grasp it. My navigation is set up, but I'm unsure how to make the off-canvas feature work.
What I'm aiming for is to have the toggled navigation slide in from the right to the left on mobile devices, covering the entire browser screen. It should have an "X" in the upper left corner to close it. Essentially, the user would click on the toggled navigation, it would slide in from the right, display the navigation options, then close when a menu item is clicked by sliding out from left to right.
Does anyone have any suggestions or ideas on how to achieve this? I really need some guidance.
Here's what my current navigation setup looks like:
<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><a href="http://www.youtube.com/user/DesignDataGmbH" title="YouTube"><i class="fa fa-youtube fa-lg"></i></a></li>
<li><a href="https://twitter.com/designdatagmbh" title="Twitter"><i class="fa fa-twitter fa-lg"></i></a></li>
<li><a href="https://www.xing.com/companies/design%252526datagmbh" title="Xing"><i class="fa fa-xing fa-lg"></i></a></li>
<li><a href="http://www.designdata.de/rss/dd-blog_feed-deutsch.xml" title="RSS"><i class="fa fa-rss fa-lg"></i></a></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">
<a href="#"><img src="images/Logo_nav.png" alt="DnD"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="mainnav nav navbar-nav">
<li><a href="#home">Home</a></li>
<li><a href="#archievements">Leistungen</a></li>
<li><a href="#about">Über uns</a></li>
<li><a href="#team">Team</a></li>
<li class="dropdown">
<a href="#actuell" class="dropdown-toggle disabled" data-toggle="dropdown">Aktuelles<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#actuellall">Alle Artikel</a></li>
</ul>
</li>
<li><a href="#customers">Kunden</a></li>
<li class="dropdown">
<a href="#jobs" class="dropdown-toggle disabled" data-toggle="dropdown">Jobs<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#jobsall">Alle Jobs</a></li>
</ul>
</li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</div>
</div>
</div>
</div>
</header>