If you're looking to achieve a specific functionality in your project, consider adding some CSS rules and a touch of jQuery to your code.
For reference, here is a link to a CodePen that I've put together which may provide some guidance:)
http://codepen.io/shashanksmaty/pen/pEWPaP
HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">BrandName</a>
</div>
<div class="container-nav">
<div class="nav-mask"></div>
<div class="nav-list">
<div class="nav-list-wrap">
<ul class="list-unstyle">
<li><strong>Home</strong></li>
<li><strong>Downloads</strong></li>
<li><strong>Contacts</strong></li>
<li><strong>About Us</strong></li>
</ul>
</div>
</div>
</div>
CSS:
.container-nav{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2000;
visibility: hidden;
}
.nav-mask{
position: absolute;
height: 100%;
width: 100%;
background-color: #000;
opacity: 0;
}
.nav-list {
position: absolute;
width: 285px;
height: 100%;
z-index: 2001;
background: #000;
color: #FFF;
right: -285px;
}
.nav-list-wrap {
padding: 30px 10px;
}
.list-unstyle {
list-style-type: none;
}
.list-unstyle li {
padding: 5px;
font-size: 20px;
cursor: pointer;
}
.list-unstyle li:hover {
text-decoration: underline;
}
jQuery:
$('.navbar-toggle').on('click', function(){
$('.container-nav').css("visibility", "visible");
$('.nav-mask').css({
"opacity": "0.6",
"-webkit-transition": "opacity 0.5s ease-in",
"transition": "opacity 0.5s ease-in"
});
$('.nav-list').css({
"right": "0px",
"-webkit-transition": "right 0.5s cubic-bezier(.17,.67,.61,.98)",
"transition": "right 0.5s cubic-bezier(.17,.67,.61,.98)"
});
});
$('.nav-mask').on('click', function(){
$('.container-nav').css("visibility", "hidden");
$('.nav-mask').css({
"opacity": "0",
"-webkit-transition": "opacity 0.5s ease-in",
"transition": "opacity 0.5s ease-in"
});
$('.nav-list').css({
"right": "-285px",
"-webkit-transition": "right 0.5s cubic-bezier(.17,.67,.61,.98)",
"transition": "right 0.5s cubic-bezier(.17,.67,.61,.98)"
});
});