Sticky Navbar Using sticky.js

Step 01: Keep jquery.sticky.js file in the js folder and call it in index.html file
Step 02: Activate the above plugin in init.js/main.js as follows:

$(document).ready(function () {
    $(".header").sticky({topSpacing:0});
});

Step 03: Within <header class="header"> tag, after container and row tag, put bootstrap nav menu. Delete nav & immediate next div tag for proper styling. You HTML Code should look like this:

<header class="header">
    <div class="container">
        <div class="row">

                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                      <a class="navbar-brand" href="#">unicorn</a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                      <ul class="nav navbar-nav navbar-right text-uppercase">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">BLog</a></li>
                        <li><a href="#">Contact</a></li>
                      </ul>
                    </div><!-- /.navbar-collapse -->

        </div>
    </div>
</header> <!-- End header -->

Step: 04: You CSS should look like this:

header.header,
.sticky-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 700;
    padding: 40px 0;
    transition: .4s;
}

.navbar-default {background: none;border: none;}
.nav > li > a:hover,
.nav > li > a:focus { background-color: transparent; }
.is-sticky .header .nav > li.active a,
.header a:hover { color: #DF451B }
.is-sticky .header {
    padding: 10px 0 ;
    background: #212121;
}
.is-sticky .header a { color: #fff }
.is-sticky .header a:hover { color: red }