Telegram Group Join Now
Create Responsive Animated Navbar Using Bootstrap
Welcome To The Codewithrandom Blog. In this blog, We learn how to Create a Responsive Animated Navbar Using Bootstrap, Html, Css, and JavaScript. This navbar is completely animated when you hover over any link or open and close navbar animation is included.
Code by | Piyush |
Project Download | Link Available Below |
Language used | HTML, CSS and JavaScript |
External link / Dependencies | Yes |
Responsive | Yes |
50+ HTML, CSS & JavaScript Projects With Source Code
ADVERTISEMENT
We Hope You Enjoy Our Blog So Let’s Start With A Basic Html Structure For A Bootstrap Navbar.
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
CDN link of Bootstrap and Fontawesome Icons
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
Simple Portfolio Website Using Html And Css With Source Code
CSS Code For Bootstrap Navbar
@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.
Restaurant Website Using HTML and CSS
Html + Css Code Output Bootstrap Navbar
CDN link of Bootstrap and jQuery
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.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
Javascript Code For Navbar
// ---------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'); // } // }) // });
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Final Output Of Bootstrap Responsive Navbar
Now we have completed our javascript Code. Hope you like the Animated Bootstrap Navbar. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!
Create Working Search Bar HTML, CSS & JavaScript
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
ADVERTISEMENT
Do you use any external links to create this project?
Yes!
ADVERTISEMENT