Bootstrap 3.0 - Navbar

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="container">
  <!-- Static navbar -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar top-bar"></span>
          <span class="icon-bar middle-bar"></span>
          <span class="icon-bar bottom-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav atitel-menu-links">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>

      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>

  <!-- Main component for a primary marketing message or call to action -->
  <div class="jumbotron">
    <h1>Navbar...

CSS

.navbar-toggle {
    border: none;
    background: transparent !important;
    z-index: 500;
    position: relative;
    color: #fff;
}
.collapsing {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}


.navbar-toggle:hover {
    background: transparent !important;
}
.navbar-toggle .icon-bar {
    width: 22px;
    transition: all 500ms;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
}
.navbar-toggle .top-bar {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
    opacity: 0;
}
.navbar-toggle .bottom-bar {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);


    -ms-transform-origin: 10% 90%;
    -webkit-transform-origin: 10% 90%;
    -moz-transform-origin: 10% 90%;
    transform-origin: 10% 90%;

}
.navbar-toggle.collapsed .top-bar {
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
    opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
}





.overlay-shadow{
    opacity: 0;

    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;

}




@media (max-width: 768px) {

    
     .navbar-nav {
        margin: 0;
        }
    
    .navbar-collapse {
       max-height: 0;
    }

    .menu-open .overlay-shadow{
        background: rgba(17, 10, 10, 0.8) none repeat...

JavaScript

if ($(window).width() < 768) {

            $('#navbar').on('shown.bs.collapse', function () {
                $('body').addClass('menu-open');
           
            });
            $('#navbar').on('hidden.bs.collapse', function () {
                $('body').removeClass('menu-open');
             
            });


        }