Telegram Group Join Now
ADVERTISEMENT
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 by | Piyush |
Project Download | Link Available Below |
Language used | HTML, CSS and JavaScript |
External link / Dependencies | Yes |
Responsive | Yes |
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
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
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
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