ADVERTISEMENT

Create Bootstrap 4 Navbar Animation – Responsive Navbar

Telegram Group Join Now

ADVERTISEMENT

Create Bootstrap 4 Navbar Animation – Responsive Navbar

Create Bootstrap 4 Navbar Animation - Responsive Navbar
Create Bootstrap 4 Navbar Animation – Responsive Navbar
 

 

ADVERTISEMENT

 

ADVERTISEMENT

Welcome To The Codewithrandom Blog. In This Blog, We Learn How To Create A Bootstrap Animated Navbar. We Use HTML, Bootstrap, Css, And JavaScript For This Bootstrap 4 Navbar Animation.

Code byPiyush
Project DownloadLink Available Below
Language usedHTML, CSS and JavaScript
External link / DependenciesYes
ResponsiveYes
Bootstrap 4 Navbar Animation Table

ADVERTISEMENT

We Hope You Enjoy Our Blog So Let’s Start With A Basic Html Structure For A Bootstrap Navbar.

ADVERTISEMENT

HTML Code For Bootstrap Navbar

<nav class="navbar navbar-expand-custom navbar-mainbg">
<a class="navbar-brand navbar-logo" href="#">Navbar</a>
<button class="navbar-toggler" type="button" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars text-white"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<div class="hori-selector"><div class="left"></div><div class="right"></div></div>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="fas fa-tachometer-alt"></i>Dashboard</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="javascript:void(0);"><i class="far fa-address-book"></i>Address Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="far fa-clone"></i>Components</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="far fa-calendar-alt"></i>Calendar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="far fa-chart-bar"></i>Charts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="far fa-copy"></i>Documents</a>
</li>
</ul>
</div>
</nav>

There is all the html code for the bootstrap navbar. Now, you can see output without css and javascript. Then we write css & javascript for the bootstrap navbar.

Create Dot Image Slider in HTML CSS (Source Code)

Output Bootstrap Responsive Navbar

ADVERTISEMENT

Create Bootstrap 4 Navbar Animation - Responsive Navbar
Create Bootstrap 4 Navbar Animation – Responsive Navbar

 

CSS Code Bootstrap Navbar

 https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css

Add this 2 cdn link in html code with link tag for working css bootstrap code

50+ Html ,Css & Javascript Projects With Source Code

Css Code

ADVERTISEMENT

@import url('https://fonts.googleapis.com/css?family=Roboto');
body{
font-family: 'Roboto', sans-serif;
}
* {
margin: 0;
padding: 0;
}
i {
margin-right: 10px;
}
/*----------bootstrap-navbar-css------------*/
.navbar-logo{
padding: 15px;
color: #fff;
}
.navbar-mainbg{
background-color: #5161ce;
padding: 0px;
}
#navbarSupportedContent{
overflow: hidden;
position: relative;
}
#navbarSupportedContent ul{
padding: 0px;
margin: 0px;
}
#navbarSupportedContent ul li a i{
margin-right: 10px;
}
#navbarSupportedContent li {
list-style-type: none;
float: left;
}
#navbarSupportedContent ul li a{
color: rgba(255,255,255,0.5);
text-decoration: none;
font-size: 15px;
display: block;
padding: 20px 20px;
transition-duration:0.6s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
position: relative;
}
#navbarSupportedContent>ul>li.active>a{
color: #5161ce;
background-color: transparent;
transition: all 0.7s;
}
#navbarSupportedContent a:not(:only-child):after {
content: "f105";
position: absolute;
right: 20px;
top: 10px;
font-size: 14px;
font-family: "Font Awesome 5 Free";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 900;
transition: 0.5s;
}
#navbarSupportedContent .active>a:not(:only-child):after {
transform: rotate(90deg);
}
.hori-selector{
display:inline-block;
position:absolute;
height: 100%;
top: 0px;
left: 0px;
transition-duration:0.6s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
background-color: #fff;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
margin-top: 10px;
}
.hori-selector .right,
.hori-selector .left{
position: absolute;
width: 25px;
height: 25px;
background-color: #fff;
bottom: 10px;
}
.hori-selector .right{
right: -25px;
}
.hori-selector .left{
left: -25px;
}
.hori-selector .right:before,
.hori-selector .left:before{
content: '';
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #5161ce;
}
.hori-selector .right:before{
bottom: 0;
right: -25px;
}
.hori-selector .left:before{
bottom: 0;
left: -25px;
}
@media(min-width: 992px){
.navbar-expand-custom {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-pack: start;
justify-content: flex-start;
}
.navbar-expand-custom .navbar-nav {
-ms-flex-direction: row;
flex-direction: row;
}
.navbar-expand-custom .navbar-toggler {
display: none;
}
.navbar-expand-custom .navbar-collapse {
display: -ms-flexbox!important;
display: flex!important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
}
@media (max-width: 991px){
#navbarSupportedContent ul li a{
padding: 12px 30px;
}
.hori-selector{
margin-top: 0px;
margin-left: 10px;
border-radius: 0;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
.hori-selector .left,
.hori-selector .right{
right: 10px;
}
.hori-selector .left{
top: -25px;
left: auto;
}
.hori-selector .right{
bottom: -25px;
}
.hori-selector .left:before{
left: -25px;
top: -25px;
}
.hori-selector .right:before{
bottom: -25px;
left: -25px;
}
}

Here is our updated output css code for the bootstrap responsive navbar.

ADVERTISEMENT

Html + Css Code Output Bootstrap Responsive Navbar

 

Create Bootstrap 4 Navbar Animation - Responsive Navbar
Create Bootstrap 4 Navbar Animation – Responsive Navbar

 

Javascript Code Bootstrap Responsive Navbar

 https://code.jquery.com/jquery-3.4.1.min.js
https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js
https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js

Add these 3 cdn links in html with script tag for working javascript code.

Portfolio Website Using HTML ,CSS and Javascript Source Code

Javascript Code

ADVERTISEMENT

// ---------Responsive-navbar-active-animation-----------
function test(){
var tabsNewAnim = $('#navbarSupportedContent');
var selectorNewAnim = $('#navbarSupportedContent').find('li').length;
var activeItemNewAnim = tabsNewAnim.find('.active');
var activeWidthNewAnimHeight = activeItemNewAnim.innerHeight();
var activeWidthNewAnimWidth = activeItemNewAnim.innerWidth();
var itemPosNewAnimTop = activeItemNewAnim.position();
var itemPosNewAnimLeft = activeItemNewAnim.position();
$(".hori-selector").css({
"top":itemPosNewAnimTop.top + "px",
"left":itemPosNewAnimLeft.left + "px",
"height": activeWidthNewAnimHeight + "px",
"width": activeWidthNewAnimWidth + "px"
});
$("#navbarSupportedContent").on("click","li",function(e){
$('#navbarSupportedContent ul li').removeClass("active");
$(this).addClass('active');
var activeWidthNewAnimHeight = $(this).innerHeight();
var activeWidthNewAnimWidth = $(this).innerWidth();
var itemPosNewAnimTop = $(this).position();
var itemPosNewAnimLeft = $(this).position();
$(".hori-selector").css({
"top":itemPosNewAnimTop.top + "px",
"left":itemPosNewAnimLeft.left + "px",
"height": activeWidthNewAnimHeight + "px",
"width": activeWidthNewAnimWidth + "px"
});
});
}
$(document).ready(function(){
setTimeout(function(){ test(); });
});
$(window).on('resize', function(){
setTimeout(function(){ test(); }, 500);
});
$(".navbar-toggler").click(function(){
$(".navbar-collapse").slideToggle(300);
setTimeout(function(){ test(); });
});
// --------------add active class-on another-page move----------
jQuery(document).ready(function($){
// Get current path and find target link
var path = window.location.pathname.split("/").pop();
// Account for home page with empty path
if ( path == '' ) {
path = 'index.html';
}
var target = $('#navbarSupportedContent ul li a[href="'+path+'"]');
// Add active class to target link
target.parent().addClass('active');
});
// Add active class on another page linked
// ==========================================
// $(window).on('load',function () {
// var current = location.pathname;
// console.log(current);
// $('#navbarSupportedContent ul li a').each(function(){
// var $this = $(this);
// // if the current path is like this link, make it active
// if($this.attr('href').indexOf(current) !== -1){
// $this.parent().addClass('active');
// $this.parents('.menu-submenu').addClass('show-dropdown');
// $this.parents('.menu-submenu').parent().addClass('active');
// }else{
// $this.parent().removeClass('active');
// }
// })
// });

 

Final Output Of Bootstrap Responsive Navbar

Create Bootstrap 4 Navbar Animation - Responsive Navbar
Create Bootstrap 4 Navbar Animation – Responsive Navbar
Create Bootstrap 4 Navbar Animation - Responsive Navbar
Create Bootstrap 4 Navbar Animation – Responsive Navbar

 

ADVERTISEMENT

Now we have completed our javascript code section. Here is our updated output with Html, Css, And Javascript. Hope you like the Bootstrap navbar. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!

ADVERTISEMENT

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

ADVERTISEMENT

In this post, we learn how to create a Bootstrap navbar using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

ADVERTISEMENT

Written by – Code With Random/Anki 

Codepen by – Piyush

Which code editor do you use for this Bootstrap 4 Navbar Animation coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this is a responsive project

Do you use any external links to create this project?

Yes!

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT