Awesome responsive navigation menu bar

Developer
Kanha Sahu
Size
2,412 Kb
Views
36,432
  1. Awesome responsive navigation menu bar Previews
  2. Awesome responsive navigation menu bar HTML Codes
  3. Awesome responsive navigation menu bar CSS Codes

How do I make an awesome responsive navigation menu bar?

Awesome responsive navigation menu bar using bootstrap html css jquery. What is a awesome responsive navigation menu bar? How do you make a awesome responsive navigation menu bar? This script and codes were developed by Kanha Sahu on 27 August 2022, Saturday.

Awesome responsive navigation menu bar Previews
IQ Test

Awesome responsive navigation menu bar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Awesome responsive navigation menu bar</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="navbar-wrapper"> <div class="container-fluid"> <nav class="navbar navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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="#">Logo</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#" class="">Home</a></li> <li class=" dropdown"> <a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Departments <span class="caret"></span></a> <ul class="dropdown-menu"> <li class=" dropdown"> <a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">View Departments</a> </li> <li><a href="#">Add New</a></li> </ul> </li> <li><a href="#">Add New</a></li> <li class=" dropdown"><a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Managers <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">View Managers</a></li> <li><a href="#">Add New</a></li> </ul> </li> <li class=" dropdown"><a href="#" class="dropdown-toggle active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Staff <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">View Staff</a></li> <li><a href="#">Add New</a></li> <li><a href="#">Bulk Upload</a></li> </ul> </li> <li class=" down"><a href="#" class="dropdown-toggle active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">HR <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Change Time Entry</a></li> <li><a href="#">Report</a></li> </ul> </li> </ul> <ul class="nav navbar-nav pull-right"> <li class=" dropdown"><a href="#" class="dropdown-toggle active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Signed in as <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Change Password</a></li> <li><a href="#">My Profile</a></li> </ul> </li> <li class=""><a href="#">Logout</a></li> </ul> </div> </div> </nav> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>

Awesome responsive navigation menu bar - Script Codes CSS Codes

body{ background: #8999A8;
}
.navbar, .dropdown-menu{
background:rgba(255,255,255,0.25);
border: none;
}
.nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a, .dropdown-menu>li{ border-bottom: 3px solid transparent;
}
.nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{ border-bottom: 3px solid transparent; background: none;
}
.navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .navbar-toggle{ color: #fff;
}
.dropdown-menu{ -webkit-box-shadow: none; box-shadow:none;
}
.nav li:hover:nth-child(8n+1), .nav li.active:nth-child(8n+1){ border-bottom: #C4E17F 3px solid;
}
.nav li:hover:nth-child(8n+2), .nav li.active:nth-child(8n+2){ border-bottom: #F7FDCA 3px solid;
}
.nav li:hover:nth-child(8n+3), .nav li.active:nth-child(8n+3){ border-bottom: #FECF71 3px solid;
}
.nav li:hover:nth-child(8n+4), .nav li.active:nth-child(8n+4){ border-bottom: #F0776C 3px solid;
}
.nav li:hover:nth-child(8n+5), .nav li.active:nth-child(8n+5){ border-bottom: #DB9DBE 3px solid;
}
.nav li:hover:nth-child(8n+6), .nav li.active:nth-child(8n+6){ border-bottom: #C49CDE 3px solid;
}
.nav li:hover:nth-child(8n+7), .nav li.active:nth-child(8n+7){ border-bottom: #669AE1 3px solid;
}
.nav li:hover:nth-child(8n+8), .nav li.active:nth-child(8n+8){ border-bottom: #62C2E4 3px solid;
}
.navbar-toggle .icon-bar{ color: #fff; background: #fff;
}
Awesome responsive navigation menu bar - Script Codes
Awesome responsive navigation menu bar - Script Codes
Home Page Home
Developer Kanha Sahu
Username kaslab
Uploaded August 27, 2022
Rating 3
Size 2,412 Kb
Views 36,432
Do you need developer help for Awesome responsive navigation menu bar?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kanha Sahu (kaslab) Script Codes
Name
Bootstrap Navigation
Bootstrap Tree Menu Example
OnClick change div
JavaScript Validation Example
Bootstrap tree
Accordion Menu With Icon
Stylish Login Panel using SCSS
Jquery Models for login, signin, forgot password
Button jquery onclick change text and effect
CSS3 checkbox with html properties, font awesome
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!