content logo
Bootstrap Headers: Bootstrap Header with Material Effect for Tabs

Almost all sites use headers and the quality and style of this header adds to the beauty of the site. Without a header, using the site and going to different sections becomes difficult and annoying. The code below the site header with the material effect in the tab Is when we click on it and this effect is also present in the search box and makes it attract the audience more attention to itself.

#Animating Navbar Code # Bootstrap Navbar Animation # Bootstrap Dynamic Navbar
<!-- this script got from www.frontendfreecode.com -->
<navbar> <div class="navbar nav navbar-fixed-top navbar-inverse"> <div class="container-fluid"> <div class="v-flex"> <div class="navbar-body"> <div class="navbar-start"> <div class="hamburger-menu"> <div class="ic_menu"> <span></span> <span></span> <span></span> </div> </div> <img class="logo" src="https://gomnam1336.github.io/FrontEndSite/Bootstrap_Header/Bootstrap_Header_with_Material_Tabs/logo.svg"> </div> <div class="search"> <input type="text" class="search-textbox" placeholder="Search"> <a class="ico-btn search-btn"><i class="material-icons ic_search">&#xE8B6;</i></a> <a class="ico-btn clear-btn"><i class="material-icons ic_clear">&#xE14C;</i></a> </div> <div class="navbar-end"> <a style="text-transform: uppercase">Get in</a> </div> </div> </div> </div> </div> <div class="navbar navbar-fixed-top navbar-inverse tabs paper-shadow-bottom-z-2"> <div class="container-fluid"> <ul class="navbar-body list-inline"> <li class="active"><a class="active">Home</a></li> <li><a>Potion Lab</a></li> <li><a>Stats</a></li> <li><a>System Log Feed</a></li> </ul> <div class="tab-highlighter"></div> </div> </div> <!--2 navbar for pushing 1 above after scrolling (Not Implemented yet.)--> </navbar><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a>
/*Styling links*/
navbar a {
    font-size: 16px;
    font-weight: 300;
    font-family: "Montserrat", sans-serif;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    padding: 10px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    margin: 4px;
}

    navbar a:hover, navbar a:active, navbar a {
        text-decoration: none;
        color: rgba(0,0,0,0.6);
    }

        navbar a:hover {
            background: rgba(0,0,0,0.06);
        }

        navbar a:active {
            color: rgba(0,0,0,0.9);
            background: rgba(0,0,0,0.1);
        }

navbar a {
    color: #5bc0de;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 14px;
    float: right;
}

/*Shadow*/
navbar .paper-shadow-bottom-z-2 {
    box-shadow: 0 8px 17px 0 rgba(0,0,0,.2);
}

/*Setting Up Navbar Layouts*/
navbar .navbar-inverse {
    color: #000;
    background: #fff;
    border: none;
    min-height: 50px;
    max-height: 50px;
    height: 50px;
}

navbar .container-fluid {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

navbar .navbar-body {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    -webkit-align-items: center;
    justify-content: space-between;
    height: 100%;
    position: relative;
}

navbar div.navbar-end {
    align-items: flex-start;
    -webkit-align-items: flex-start;
}

navbar div.navbar-start,
navbar div.navbar-end {
    flex: 1;
    -webkit-flex: 1;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    -webkit-align-items: center;
    justify-content: space-around;
}

    navbar div.navbar-start .logo {
        opacity: 0.6;
        width: 30px;
    }

/*Integrating Two Navbars Together*/
navbar .nav {
    z-index: 2;
}

navbar .tabs {
    margin-top: 50px;
    z-index: 1;
    position: relative;
}

    navbar .tabs .navbar-body {
        padding: 0;
        margin-bottom: 0;
    }

/*Styling Search Textbox*/

navbar div.search {
    background: rgba(0,0,0,0.12);
    flex: 3;
    -webkit-flex: 3;
    margin: 6px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    cursor: pointer;
    text-align: center;
    position: relative;
    -webkit-transition: all 0.3s cubic-bezier(0.21, 0.61, 0.36, 1);
    -moz-transition: all 0.3s cubic-bezier(0.21, 0.61, 0.36, 1);
    -ms-transition: all 0.3s cubic-bezier(0.21, 0.61, 0.36, 1);
    -o-transition: all 0.3s cubic-bezier(0.21, 0.61, 0.36, 1);
    transition: all 0.3s cubic-bezier(0.21, 0.61, 0.36, 1);
}

navbar div.search {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    height: 42px;
    padding: 0 9px;
    overflow-x: hidden;
}

    navbar div.search.focused {
        background: rgba(0,0,0,0.05);
    }

    navbar div.search .search-textbox {
        position: relative;
        width: 60px;
        height: 100%;
        background: transparent;
        border: none;
        font-family: "Montserrat", sans-serif;
        font-size: 16px;
        text-align: start;
        color: rgba(0,0,0,1);
        outline: none;
        -webkit-transition: all 0.5s cubic-bezier(0.21, 0.61, 0.36, 1);
        -moz-transition: all 0.5s cubic-bezier(0.21, 0.61, 0.36, 1);
        -ms-transition: all 0.5s cubic-bezier(0.21, 0.61, 0.36, 1);
        -o-transition: all 0.5s cubic-bezier(0.21, 0.61, 0.36, 1);
        transition: all 0.5s cubic-bezier(0.21, 0.61, 0.36, 1);
        cursor: pointer;
    }

    navbar div.search.focused .search-textbox {
        width: 100%;
        cursor: text;
    }

    navbar div.search:hover span {
        -webkit-transform: translateX(40%);
        -moz-transform: translateX(40%);
        -ms-transform: translateX(40%);
        -o-transform: translateX(40%);
        transform: translateX(40%);
    }

navbar .ico-btn {
    position: relative;
    width: 30px;
    height: 30px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    padding: 5px;
}

    navbar .ico-btn.search-btn, .ico-btn.clear-btn {
        padding: 3px;
        margin: 3px;
        opacity: 0;
        visibility: hidden;
    }

    navbar .ico-btn.clear-btn {
        margin-right: -30px;
        -webkit-animation: 0.3s SwiftSlideToRight cubic-bezier(0.21, 0.61, 0.36, 1) 0.2s;
        -o-animation: 0.3s SwiftSlideToRight cubic-bezier(0.21, 0.61, 0.36, 1) 0.2s;
        animation: 0.3s SwiftSlideToRight cubic-bezier(0.21, 0.61, 0.36, 1) 0.2s;
        -webkit-animation-delay: 0.2s;
        -moz-animation-delay: 0.2s;
        -o-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

navbar div.search.focused.not-null.multi-char .ico-btn.clear-btn {
    margin-right: 0;
    opacity: 1;
    visibility: visible;
    -webkit-animation: 0.3s SwiftSlide cubic-bezier(0.21, 0.61, 0.36, 1);
    -o-animation: 0.3s SwiftSlide cubic-bezier(0.21, 0.61, 0.36, 1);
    animation: 0.3s SwiftSlide cubic-bezier(0.21, 0.61, 0.36, 1);
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

navbar .ico-btn {
    -webkit-transition: all 0.2s cubic-bezier(0.21, 0.61, 0.36, 1);
    -moz-transition: all 0.2s cubic-bezier(0.21, 0.61, 0.36, 1);
    -ms-transition: all 0.2s cubic-bezier(0.21, 0.61, 0.36, 1);
    -o-transition: all 0.2s cubic-bezier(0.21, 0.61, 0.36, 1);
    transition: all 0.2s cubic-bezier(0.21, 0.61, 0.36, 1);
}

navbar div.search.focused.not-null .ico-btn.search-btn {
    visibility: visible;
    opacity: 1;
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    -ms-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    transition-duration: 0.6s;
}

/*Styling Tabs*/
navbar .tabs .navbar-body li.active a {
    color: #333;
}

navbar .tabs .navbar-body li {
    -webkit-transition: all 0.2s cubic-bezier(0.21, 0.61, 0.36, 1);
    -moz-transition: all 0.2s cubic-bezier(0.21, 0.61, 0.36, 1);
    -ms-transition: all 0.2s cubic-bezier(0.21, 0.61, 0.36, 1);
    -o-transition: all 0.2s cubic-bezier(0.21, 0.61, 0.36, 1);
    transition: all 0.2s cubic-bezier(0.21, 0.61, 0.36, 1);
}

    navbar .tabs .navbar-body li:hover {
        background: rgba(0,0,0,0.02);
    }

    navbar .tabs .navbar-body li:active {
        background: rgba(0,0,0,0.05);
    }

    navbar .tabs .navbar-body li a:hover, .tabs .navbar-body li a:active {
        background: rgba(0,0,0,0);
        color: #5bc0de;
    }

/*Styling Tab Highlighter*/
navbar .tab-highlighter {
    height: 2px;
    width: 50px;
    margin-top: -2px;
    background: #000;
    position: absolute;
    -webkit-transition: all 0.6s cubic-bezier(0.21, 0.61, 0.36, 1);
    -moz-transition: all 0.6s cubic-bezier(0.21, 0.61, 0.36, 1);
    -ms-transition: all 0.6s cubic-bezier(0.21, 0.61, 0.36, 1);
    -o-transition: all 0.6s cubic-bezier(0.21, 0.61, 0.36, 1);
    transition: all 0.6s cubic-bezier(0.21, 0.61, 0.36, 1);
}

/*Keyframes*/
@keyframes SwiftSlide {
    100% {
        margin-right: 0;
        opacity: 1;
    }
}

@keyframes SwiftSlideToRight {
    100% {
        opacity: 0;
        margin-right: -30px;
    }
}
/*Textbox Events*/
$(document).on('focusin', 'navbar input.search-textbox', function () {
    if ($(this).val() <= 0) {
        var parent = $(this).closest('div.search');
        parent.addClass('focused');
    }
});
$(document).on('focusout', 'navbar input.search-textbox', function () {
    if ($(this).val() <= 0) {
        var parent = $(this).closest('div.search');
        parent.removeClass('focused');
    }
});
$(document).on('click', 'navbar .search', function () {
    $(this).children('input.search-textbox').focus();
});

/*Text Key Events for Animating Icons i.e. .ico-btn*/
$(document).on('keyup', 'navbar input.search-textbox', function () {
    var parent = $(this).closest('div.search');
    var phrase = $(this).val(),
        phrase_length = phrase.length;

    if (phrase_length >= 2) {
        parent.addClass('multi-char');
        if (!parent.hasClass('not-null')) {
            parent.addClass('not-null');
        }

    }
    else if (phrase_length == 1) {
        parent.addClass('not-null');
        parent.removeClass('multi-char');
    }
    else if (phrase_length <= 0) {
        parent.removeClass('not-null');
        parent.removeClass('multi-char');
    }
});

/*Tab Highlighter Functionality*/
$(document).on('click', 'navbar .tabs ul.navbar-body li a', function () {
    var $this = $(this);
    TabHighlighter.set($this);
    $this.closest('li').siblings('.active').removeClass('active');
    $this.closest('li').addClass('active');
});
var TabHighlighter = {
    set: function ($this) {
        $('.tab-highlighter').css({
            'left': $this.closest('li').offset().left,
            'width': $this.closest('li').outerWidth()
        });
    },
    refresh: function () {
        var $this = $('.tabs ul.navbar-body li.active a');
        $('.tab-highlighter').css({
            'left': $this.closest('li').offset().left,
            'width': $this.closest('li').outerWidth()
        });
    }
};
$(window).resize(function () {
    TabHighlighter.refresh();
});
$(document).ready(function () {
    TabHighlighter.refresh();
});
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet' href='http://frontendfreecode.com/codes/files/ic_menu.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- this script got from www.frontendfreecode.com -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet' href='http://frontendfreecode.com/codes/files/ic_menu.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<style>
/*Styling links*/
navbar a {
    font-size: 16px;
    font-weight: 300;
    font-family: "Montserrat", sans-serif;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    padding: 10px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    margin: 4px;
}

    navbar a:hover, navbar a:active, navbar a {
        text-decoration: none;
        color: rgba(0,0,0,0.6);
    }

        navbar a:hover {
            background: rgba(0,0,0,0.06);
        }

        navbar a:active {
            color: rgba(0,0,0,0.9);
            background: rgba(0,0,0,0.1);
        }

navbar a {
    color: #5bc0de;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 14px;
    float: right;
}

/*Shadow*/
navbar .paper-shadow-bottom-z-2 {
    box-shadow: 0 8px 17px 0 rgba(0,0,0,.2);
}

/*Setting Up Navbar Layouts*/
navbar .navbar-inverse {
    color: #000;
    background: #fff;
    border: none;
    min-height: 50px;
    max-height: 50px;
    height: 50px;
}

navbar .container-fluid {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

navbar .navbar-body {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    -webkit-align-items: center;
    justify-content: space-between;
    height: 100%;
    position: relative;
}

navbar div.navbar-end {
    align-items: flex-start;
    -webkit-align-items: flex-start;
}

navbar div.navbar-start,
navbar div.navbar-end {
    flex: 1;
    -webkit-flex: 1;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    -webkit-align-items: center;
    justify-content: space-around;
}

    navbar div.navbar-start .logo {
        opacity: 0.6;
        width: 30px;
    }

/*Integrating Two Navbars Together*/
navbar .nav {
    z-index: 2;
}

navbar .tabs {
    margin-top: 50px;
    z-index: 1;
    position: relative;
}

    navbar .tabs .navbar-body {
        padding: 0;
        margin-bottom: 0;
    }

/*Styling Search Textbox*/

navbar div.search {
    background: rgba(0,0,0,0.12);
    flex: 3;
    -webkit-flex: 3;
    margin: 6px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    cursor: pointer;
    text-align: center;
    position: relative;
    -webkit-transition: all 0.3s cubic-bezier(0.21, 0.61, 0.36, 1);
    -moz-transition: all 0.3s cubic-bezier(0.21, 0.61, 0.36, 1);
    -ms-transition: all 0.3s cubic-bezier(0.21, 0.61, 0.36, 1);
    -o-transition: all 0.3s cubic-bezier(0.21, 0.61, 0.36, 1);
    transition: all 0.3s cubic-bezier(0.21, 0.61, 0.36, 1);
}

navbar div.search {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    height: 42px;
    padding: 0 9px;
    overflow-x: hidden;
}

    navbar div.search.focused {
        background: rgba(0,0,0,0.05);
    }

    navbar div.search .search-textbox {
        position: relative;
        width: 60px;
        height: 100%;
        background: transparent;
        border: none;
        font-family: "Montserrat", sans-serif;
        font-size: 16px;
        text-align: start;
        color: rgba(0,0,0,1);
        outline: none;
        -webkit-transition: all 0.5s cubic-bezier(0.21, 0.61, 0.36, 1);
        -moz-transition: all 0.5s cubic-bezier(0.21, 0.61, 0.36, 1);
        -ms-transition: all 0.5s cubic-bezier(0.21, 0.61, 0.36, 1);
        -o-transition: all 0.5s cubic-bezier(0.21, 0.61, 0.36, 1);
        transition: all 0.5s cubic-bezier(0.21, 0.61, 0.36, 1);
        cursor: pointer;
    }

    navbar div.search.focused .search-textbox {
        width: 100%;
        cursor: text;
    }

    navbar div.search:hover span {
        -webkit-transform: translateX(40%);
        -moz-transform: translateX(40%);
        -ms-transform: translateX(40%);
        -o-transform: translateX(40%);
        transform: translateX(40%);
    }

navbar .ico-btn {
    position: relative;
    width: 30px;
    height: 30px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    padding: 5px;
}

    navbar .ico-btn.search-btn, .ico-btn.clear-btn {
        padding: 3px;
        margin: 3px;
        opacity: 0;
        visibility: hidden;
    }

    navbar .ico-btn.clear-btn {
        margin-right: -30px;
        -webkit-animation: 0.3s SwiftSlideToRight cubic-bezier(0.21, 0.61, 0.36, 1) 0.2s;
        -o-animation: 0.3s SwiftSlideToRight cubic-bezier(0.21, 0.61, 0.36, 1) 0.2s;
        animation: 0.3s SwiftSlideToRight cubic-bezier(0.21, 0.61, 0.36, 1) 0.2s;
        -webkit-animation-delay: 0.2s;
        -moz-animation-delay: 0.2s;
        -o-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

navbar div.search.focused.not-null.multi-char .ico-btn.clear-btn {
    margin-right: 0;
    opacity: 1;
    visibility: visible;
    -webkit-animation: 0.3s SwiftSlide cubic-bezier(0.21, 0.61, 0.36, 1);
    -o-animation: 0.3s SwiftSlide cubic-bezier(0.21, 0.61, 0.36, 1);
    animation: 0.3s SwiftSlide cubic-bezier(0.21, 0.61, 0.36, 1);
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

navbar .ico-btn {
    -webkit-transition: all 0.2s cubic-bezier(0.21, 0.61, 0.36, 1);
    -moz-transition: all 0.2s cubic-bezier(0.21, 0.61, 0.36, 1);
    -ms-transition: all 0.2s cubic-bezier(0.21, 0.61, 0.36, 1);
    -o-transition: all 0.2s cubic-bezier(0.21, 0.61, 0.36, 1);
    transition: all 0.2s cubic-bezier(0.21, 0.61, 0.36, 1);
}

navbar div.search.focused.not-null .ico-btn.search-btn {
    visibility: visible;
    opacity: 1;
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    -ms-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    transition-duration: 0.6s;
}

/*Styling Tabs*/
navbar .tabs .navbar-body li.active a {
    color: #333;
}

navbar .tabs .navbar-body li {
    -webkit-transition: all 0.2s cubic-bezier(0.21, 0.61, 0.36, 1);
    -moz-transition: all 0.2s cubic-bezier(0.21, 0.61, 0.36, 1);
    -ms-transition: all 0.2s cubic-bezier(0.21, 0.61, 0.36, 1);
    -o-transition: all 0.2s cubic-bezier(0.21, 0.61, 0.36, 1);
    transition: all 0.2s cubic-bezier(0.21, 0.61, 0.36, 1);
}

    navbar .tabs .navbar-body li:hover {
        background: rgba(0,0,0,0.02);
    }

    navbar .tabs .navbar-body li:active {
        background: rgba(0,0,0,0.05);
    }

    navbar .tabs .navbar-body li a:hover, .tabs .navbar-body li a:active {
        background: rgba(0,0,0,0);
        color: #5bc0de;
    }

/*Styling Tab Highlighter*/
navbar .tab-highlighter {
    height: 2px;
    width: 50px;
    margin-top: -2px;
    background: #000;
    position: absolute;
    -webkit-transition: all 0.6s cubic-bezier(0.21, 0.61, 0.36, 1);
    -moz-transition: all 0.6s cubic-bezier(0.21, 0.61, 0.36, 1);
    -ms-transition: all 0.6s cubic-bezier(0.21, 0.61, 0.36, 1);
    -o-transition: all 0.6s cubic-bezier(0.21, 0.61, 0.36, 1);
    transition: all 0.6s cubic-bezier(0.21, 0.61, 0.36, 1);
}

/*Keyframes*/
@keyframes SwiftSlide {
    100% {
        margin-right: 0;
        opacity: 1;
    }
}

@keyframes SwiftSlideToRight {
    100% {
        opacity: 0;
        margin-right: -30px;
    }
}
</style>

</head>
<body>
<navbar>
    <div class="navbar nav navbar-fixed-top navbar-inverse">
        <div class="container-fluid">
            <div class="v-flex">
                <div class="navbar-body">
                    <div class="navbar-start">
                        <div class="hamburger-menu">
                            <div class="ic_menu">
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </div>
                        <img class="logo" src="https://gomnam1336.github.io/FrontEndSite/Bootstrap_Header/Bootstrap_Header_with_Material_Tabs/logo.svg">
                    </div>
                    <div class="search">
                        <input type="text" class="search-textbox" placeholder="Search">
                        <a class="ico-btn search-btn"><i class="material-icons ic_search">&#xE8B6;</i></a>
                        <a class="ico-btn clear-btn"><i class="material-icons ic_clear">&#xE14C;</i></a>
                    </div>
                    <div class="navbar-end">
                        <a style="text-transform: uppercase">Get in</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="navbar navbar-fixed-top navbar-inverse tabs paper-shadow-bottom-z-2">
        <div class="container-fluid">
            <ul class="navbar-body list-inline">
                <li class="active"><a class="active">Home</a></li>
                <li><a>Potion Lab</a></li>
                <li><a>Stats</a></li>
                <li><a>System Log Feed</a></li>
            </ul>
            <div class="tab-highlighter"></div>
        </div>
    </div>
    <!--2 navbar for pushing 1 above after scrolling (Not Implemented yet.)-->
</navbar>
<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>
<script>
/*Textbox Events*/
$(document).on('focusin', 'navbar input.search-textbox', function () {
    if ($(this).val() <= 0) {
        var parent = $(this).closest('div.search');
        parent.addClass('focused');
    }
});
$(document).on('focusout', 'navbar input.search-textbox', function () {
    if ($(this).val() <= 0) {
        var parent = $(this).closest('div.search');
        parent.removeClass('focused');
    }
});
$(document).on('click', 'navbar .search', function () {
    $(this).children('input.search-textbox').focus();
});

/*Text Key Events for Animating Icons i.e. .ico-btn*/
$(document).on('keyup', 'navbar input.search-textbox', function () {
    var parent = $(this).closest('div.search');
    var phrase = $(this).val(),
        phrase_length = phrase.length;

    if (phrase_length >= 2) {
        parent.addClass('multi-char');
        if (!parent.hasClass('not-null')) {
            parent.addClass('not-null');
        }

    }
    else if (phrase_length == 1) {
        parent.addClass('not-null');
        parent.removeClass('multi-char');
    }
    else if (phrase_length <= 0) {
        parent.removeClass('not-null');
        parent.removeClass('multi-char');
    }
});

/*Tab Highlighter Functionality*/
$(document).on('click', 'navbar .tabs ul.navbar-body li a', function () {
    var $this = $(this);
    TabHighlighter.set($this);
    $this.closest('li').siblings('.active').removeClass('active');
    $this.closest('li').addClass('active');
});
var TabHighlighter = {
    set: function ($this) {
        $('.tab-highlighter').css({
            'left': $this.closest('li').offset().left,
            'width': $this.closest('li').outerWidth()
        });
    },
    refresh: function () {
        var $this = $('.tabs ul.navbar-body li.active a');
        $('.tab-highlighter').css({
            'left': $this.closest('li').offset().left,
            'width': $this.closest('li').outerWidth()
        });
    }
};
$(window).resize(function () {
    TabHighlighter.refresh();
});
$(document).ready(function () {
    TabHighlighter.refresh();
});
</script>

</body>
</html>
Preview