Bootstrap 4 Animated Mobile Menu [CSS,JS,HTML]

You can use the Bootstrap navbar component to create responsive navigation header for your website or application. These responsive navbar initially collapsed on devices having small viewports like cell-phones but expand when user click the toggle button. However, it will be horizontal as normal on the medium and large devices like laptop or desktop.

You can also create different variations of the navbar such as navbars with dropdown menus and search boxes as well as fixed positioned navbar with much less effort. The following example will show you how to create a simple animated fixed navbar with navigation links.

So let's begin from HTML part

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<header class="head-main">
  <div class="navbar navbar-dark bg-dark box-shadow">
    <div class="container d-flex justify-content-between">
      <a href="#" class="navbar-brand d-flex align-items-center">
        <strong>DiNeuron</strong>
      </a>
      <a class="nav-button ml-auto mr-4"><span id="nav-icon3"><span></span><span></span><span></span><span></span></span></a>
    </div>
  </div> <!--navbar end-->
  
  <div class="fixed-top dineuron-menu">
    <div class="flex-center p-5">
      <ul class="nav flex-column">
        <li class="nav-item delay-1"><a class="nav-link" href="#">HOME</a></li>
        <li class="nav-item delay-2"><a class="nav-link" href="#">ABOUT US</a></li>
        <li class="nav-item delay-3"><a class="nav-link" href="#">PRODUCTS</a></li>
        <li class="nav-item delay-4"><a class="nav-link" href="#">APPLICATIONS</a></li>
        <li class="nav-item delay-5"><a class="nav-link" href="#">FACILITIES</a></li>
        <li class="nav-item delay-6"><a class="nav-link" href="#">QUALITY</a></li>
        <li class="nav-item delay-7"><a class="nav-link" href="#">CAREER</a></li>
        <li class="nav-item delay-8"><a class="nav-link" href="#">CONTACT US</a></li>
      </ul>
    </div>
  </div> <!--dineuron-menu end-->
</header>

<main role="main" class="container">
  <div class="jumbotron my-5">
    <h1>Navbar example</h1>
    <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
    <a class="btn btn-lg btn-primary" href="#" role="button">View navbar</a>
  </div>
</main>

Here is the css part, copy it as is. all the classes has prefix "dineuron_" you can replace with yours, or keep it.

.dineuron-menu{width: 100%; height: 100%; opacity: 0; visibility: hidden;}
.nav-open .dineuron-menu {opacity: 1; visibility: visible; background: rgba(0, 0, 0, 0.92); }
.dineuron-menu .nav li a{color:#FFF; font-size: 5vh; font-weight:600; }
.dineuron-menu .nav li{
    opacity: 0;
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
    -webkit-animation-timing-function: cubic-bezier(.45,.005,0,1);
    -moz-animation-timing-function: cubic-bezier(.45,.005,0,1);
    -o-animation-timing-function: cubic-bezier(.45,.005,0,1);
    animation-timing-function: cubic-bezier(.45,.005,0,1);
}
.nav-open .dineuron-menu .nav li{
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: -webkit-transform .2s,opacity .2s;
    transition: transform .2s,opacity .2s;
}
.dineuron-menu .nav li.delay-1{-webkit-transition-delay:0.1s; -moz-transition-delay:0.1s; -ms-transition-delay:0.1s; -o-transition-delay:0.1s; transition-delay:0.1s; }
.dineuron-menu .nav li.delay-2{-webkit-transition-delay:0.2s; -moz-transition-delay:0.2s; -ms-transition-delay:0.2s; -o-transition-delay:0.2s; transition-delay:0.2s; }
.dineuron-menu .nav li.delay-3{-webkit-transition-delay:0.3s; -moz-transition-delay:0.3s; -ms-transition-delay:0.3s; -o-transition-delay:0.3s; transition-delay:0.3s; }
.dineuron-menu .nav li.delay-4{-webkit-transition-delay:0.4s; -moz-transition-delay:0.4s; -ms-transition-delay:0.4s; -o-transition-delay:0.4s; transition-delay:0.4s; }
.dineuron-menu .nav li.delay-5{-webkit-transition-delay:0.5s; -moz-transition-delay:0.5s; -ms-transition-delay:0.5s; -o-transition-delay:0.5s; transition-delay:0.5s; }
.dineuron-menu .nav li.delay-6{-webkit-transition-delay:0.6s; -moz-transition-delay:0.6s; -ms-transition-delay:0.6s; -o-transition-delay:0.6s; transition-delay:0.6s; }
.dineuron-menu .nav li.delay-7{-webkit-transition-delay:0.7s; -moz-transition-delay:0.7s; -ms-transition-delay:0.7s; -o-transition-delay:0.7s; transition-delay:0.7s; }
.dineuron-menu .nav li.delay-8{-webkit-transition-delay:0.8s; -moz-transition-delay:0.8s; -ms-transition-delay:0.8s; -o-transition-delay:0.8s; transition-delay:0.8s; }
.dineuron-menu .nav li.delay-9{-webkit-transition-delay:0.9s; -moz-transition-delay:0.9s; -ms-transition-delay:0.9s; -o-transition-delay:0.9s; transition-delay:0.9s; }

.nav-button{position:relative; z-index:1111; border:solid 1px #f8f8f8;  height:42px; display:block; width:50px; padding:12px; }
.nav-button #nav-icon3{width:24px;height:22px;display:inline-block;position:relative;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;cursor:pointer;}
.nav-button #nav-icon3 span{display:block;position:absolute;height:3px;width:100%;background:#FFFFFF;border-radius:9px;opacity:1;left:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out}
.nav-button #nav-icon3 span:nth-child(1){top:0}
.nav-button #nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3){top:7px}
.nav-button #nav-icon3 span:nth-child(4){top:14px}
.nav-open #nav-icon3 span:nth-child(1){top:9px;width:0;left:50%}
.nav-open #nav-icon3 span:nth-child(2){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.nav-open #nav-icon3 span:nth-child(3){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.nav-open #nav-icon3 span:nth-child(4){top:9px;width:0;left:50%}

.flex-center{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:100%}

And the last part, small JS code, insert it somewhere in your page after jquery and bootstrap. It is recommended to put this part in your footer.

$(document).ready(function(){
  $('.nav-button').click(function(){
	$('body').toggleClass('nav-open');
  });
});

See the Pen Bootstrap 4 Animated Mobile Menu [CSS,JS,HTML] by Dineuron (@dineuron) on CodePen.

That's it.

Thanks.