content logo

Bootstrap Headers:

Vertical Bootstrap Header with Animation

Headers are a strategic section of the website. The header is what the visitors see when they first enter your website. It has such a big impact on determining whether a visitor will become your future user or leaves the site immediately. Most designers know the importance of a website header and put a lot of time and effort in designing it. some designers even create multiple separate headers that are used in different parts of the website. For instance, they might design a large header for the homepage and use a much smaller and narrower one for the other subpages. The important thing here is that the website should be cohesive and follow a similar theme throughout the pages. So, the mini headers should be an abbreviated version of the main header.

The Bootstrap dynamic navbar we are sharing in this post features a normal drop-down header. The Bootstrap navbar animation expands upon clicking the toggle button at the top of the screen and opens up with a transparent dark coloured background. This means the navbar will not cover the nice background you have for your page. You can use this animating navbar code for free by scrolling down to the code section of this post.

#Animating Navbar Code #Bootstrap Navbar Animation #Bootstrap Dynamic Navbar

<!-- This script got from www.frontendfreecode.com -->
<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">If you want to implement this into your website, please visit link below, you will get full guideline.</p>
    <a class="btn btn-lg btn-primary" href="#" role="button" target="_blank">Read</a>
  </div>
</main><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Free Code</a>
                                                                            
.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%
}
$(document).ready(function () {
    $('.nav-button').click(function () {
        $('body').toggleClass('nav-open');
    });
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.frontendfreecode.com -->

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.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%
}
</style>

</head>
<body>
<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">If you want to implement this into your website, please visit link below, you will get full guideline.</p>
    <a class="btn btn-lg btn-primary" href="#" role="button" target="_blank">Read</a>
  </div>
</main><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Frontend Free Code</a></div>
<script>
$(document).ready(function () {
    $('.nav-button').click(function () {
        $('body').toggleClass('nav-open');
    });
});
</script>

</body>
</html>
Preview