Posted in
11489
2:32 am, November 13, 2021
Responsive Mobile Bootstrap 4 Animated Rounded Navbar
What is it?
An Animated Bootstrap based navigation with font awesome icons
What can i use this for?
This navigation works on mobile and desktop browsers for a nice twist to your navigation needs.
Original Source
Thanks to the author piyushpd, this code comes from the
bootstrap 4 navbar pen on Codepen.
Responsive Mobile Bootstrap 4 Animated Rounded Navbar Demo
View Demo Full Screen View Demo New Tab
Responsive Mobile Bootstrap 4 Animated Rounded Navbar Code
HTML
<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>
CSS
@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;
}
}
Scripts
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Javascript
// ---------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');
});
External Link for Responsive Mobile Bootstrap 4 Animated Rounded Navbar
Add Comment
Other Items in Navigation
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
css animations
HTML Canvas
javascript