content logo
Bootstrap Headers: Bootstrap Header with Hover Effect

The use of headers on sites is necessary and inevitable, but the amount of audience attraction by these headers depends on the beauty and attractiveness of these headers. The following code is a beautiful header that has a dark theme and each header item in the hover mode has a red background in the form of animation and adds to the beauty of the site. This code is relatively light and for sites that want to use light code, It is very convenient.

#Animating Navbar Code # Bootstrap Navbar Animation # Bootstrap Dynamic Navbar
<!-- this script got from www.frontendfreecode.com -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" 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="#">Animated Bootstrap Nav</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">About</a><span class="hover"></span></li> <li><a href="#">Services</a><span class="hover"></span></li> <li><a href="#">Portfolio</a><span class="hover"></span></li> <li><a href="#">Blog</a><span class="hover"></span></li> <li><a href="#">Contact</a><span class="hover"></span></li> </ul> </div> </div> </nav><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a>
body {
    background: #192226 !important;
}

.navbar-inverse {
    background: #222B31 !important;
    border-bottom: 4px solid #EE445F !important;
}

.navbar-brand {
    font: 12px Lato !important;
    text-transform: uppercase;
    color: #FFF !important;
    letter-spacing: 2px;
    margin-top: 2px;
}

.nav {
    margin-bottom: 0px;
}

    .nav a {
        font: 500 11px Lato;
        letter-spacing: 2px;
        padding: 16px !important;
        color: #a3bfc6 !important;
        text-transform: uppercase;
        position: relative;
        z-index: 1000;
    }

        .nav a:hover {
            color: #FFF !important;
        }

    .nav li {
        position: relative;
    }

.navbar-inverse .navbar-toggle {
    border: none;
}

.navbar-collapse {
    box-shadow: none !important;
    border: none !important;
}

.navbar-inverse .navbar-toggle:hover {
    background: transparent !important;
}

.navbar-inverse .navbar-toggle:focus {
    background: transparent !important;
}

.navbar-inverse .navbar-toggle:active {
    background: transparent !important;
}

.icon-bar {
    background: #a3bfc6 !important;
}

.hover {
    display: block;
    position: absolute;
    width: 0%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #EE445F !important;
    z-index: 0;
    opacity: 0;
}

@media (max-width: 767px) {
    .nav {
        padding-bottom: 20px;
    }

        .nav a {
            padding: 12px !important;
        }
}

@media (max-width: 480px) {
    .nav {
        padding-bottom: 20px;
    }
}
$("li").hover(
    function () {
        $(this).find("span").stop().animate({
            width: "100%",
            opacity: "1",
        }, 400, function () {
        })
    }, function () {
        $(this).find("span").stop().animate({
            width: "0%",
            opacity: "0",
        }, 400, function () {
        })
    }
);
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/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://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js'></script>
<style>
body {
    background: #192226 !important;
}

.navbar-inverse {
    background: #222B31 !important;
    border-bottom: 4px solid #EE445F !important;
}

.navbar-brand {
    font: 12px Lato !important;
    text-transform: uppercase;
    color: #FFF !important;
    letter-spacing: 2px;
    margin-top: 2px;
}

.nav {
    margin-bottom: 0px;
}

    .nav a {
        font: 500 11px Lato;
        letter-spacing: 2px;
        padding: 16px !important;
        color: #a3bfc6 !important;
        text-transform: uppercase;
        position: relative;
        z-index: 1000;
    }

        .nav a:hover {
            color: #FFF !important;
        }

    .nav li {
        position: relative;
    }

.navbar-inverse .navbar-toggle {
    border: none;
}

.navbar-collapse {
    box-shadow: none !important;
    border: none !important;
}

.navbar-inverse .navbar-toggle:hover {
    background: transparent !important;
}

.navbar-inverse .navbar-toggle:focus {
    background: transparent !important;
}

.navbar-inverse .navbar-toggle:active {
    background: transparent !important;
}

.icon-bar {
    background: #a3bfc6 !important;
}

.hover {
    display: block;
    position: absolute;
    width: 0%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #EE445F !important;
    z-index: 0;
    opacity: 0;
}

@media (max-width: 767px) {
    .nav {
        padding-bottom: 20px;
    }

        .nav a {
            padding: 12px !important;
        }
}

@media (max-width: 480px) {
    .nav {
        padding-bottom: 20px;
    }
}
</style>

</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" 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="#">Animated Bootstrap Nav</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">About</a><span class="hover"></span></li>
                <li><a href="#">Services</a><span class="hover"></span></li>
                <li><a href="#">Portfolio</a><span class="hover"></span></li>
                <li><a href="#">Blog</a><span class="hover"></span></li>
                <li><a href="#">Contact</a><span class="hover"></span></li>
            </ul>
        </div>
    </div>
</nav>
<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>
<script>
$("li").hover(
    function () {
        $(this).find("span").stop().animate({
            width: "100%",
            opacity: "1",
        }, 400, function () {
        })
    }, function () {
        $(this).find("span").stop().animate({
            width: "0%",
            opacity: "0",
        }, 400, function () {
        })
    }
);
</script>

</body>
</html>
Preview