Latest news

Bootstrap Sticky Navbar With Dropdown

No comments
Step 1) Add HTML:

Create a navigation bar:

<div class=”header-top”>
<div class=”container”>
<div class=”header-top-inner”>
<ul class=”list-unstyled contact-info”>
<li><a href=”#”>(000) 000-000</a></li>
<li><a href=”#”>info@osomweb.com</a></li>
</ul>
</div>
</div>
</div>
<nav class=”navbar navbar-default”>
<div class=”container”>
<!– Brand and toggle get grouped for better mobile display –>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#bs-example-navbar-collapse-1″ aria-expanded=”false”>
<span class=”glyphicon glyphicon-menu-hamburger”></span>
</button>
<a class=”navbar-brand” href=”index.html”>
<img src=”images/logo.png” alt=””/>
</a>
</div>
<!– Collect the nav links, forms, and other content for toggling –>
<div class=”collapse navbar-collapse” id=”bs-example-navbar-collapse-1″>
<ul class=”nav navbar-nav navbar-right”>
<li class=”active”><a href=”index.html”>home</a></li>
<li><a href=”#”>About us</a></li>
<li class=”dropdown”>
<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown” role=”button” aria-haspopup=”true” aria-expanded=”false”>services <span class=”caret”></span></a>
<div class=”dropdown-menu”>
<ul class=”list-unstyled”>
<li><a href=”#”>Virus/Spy-ware removal</a></li>
<li><a href=”#”>Computer Upgrade/Repair</a></li>
<li><a href=”#”>Apple Repair/Service</a></li>
<li><a href=”#”>Custom Built PC’S</a></li>
<li><a href=”#”>Data Recovery</a></li>
<li><a href=”#”>Photo & Video conversion</a></li>
<li><a href=”#”>In Home TV Setup/Installation</a></li>
</ul>
</div>
</li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
</div><!– /.navbar-collapse –>
</div><!– /.container-fluid –>
</nav>

Step 2) Add CSS:

Style the navigation bar:

header{
position: sticky;
transition: transform 0.3s ease-in;
background: #fff;
top: 0;
z-index: 999;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
header.sticky{
transform: translateY(-42px);
}
header:not(.sticky){
transform: translateY(0);
}
.header-top {
height: 42px;
position: relative;
background: #131921;
}
.header-top-inner {
display: flex;
flex-direction: row;
align-items: center;
height: 42px;
}
.header-top-inner .spacer {
flex: 1;
}
.header-top-inner ul {
margin: 0;
}
.header-top-inner ul li {
display: inline-block;
}
.header-top-inner ul li + li {
margin-left: 20px;
}
.header-top-inner ul li a {
color: #fff;
font-size: 15px;
display: inline-block;
text-decoration: none;
vertical-align:middle;
}
.header-top-inner ul li a span {
margin-right: 10px;
display:inline-block;
vertical-align:middle;
}
.header-top-inner ul.contact-info li a {
color: #fff;

}
.header-top-inner ul.contact-info li a span {
color: #fff;
}
.header-top-inner ul.contact-links li a {
color: #fff;
text-transform: uppercase;
}
.header-top-inner ul.contact-links li + li {
border-color: #000;
}
.navbar-default {
background: transparent;
border: none;
margin-bottom: 0;
}
.navbar-default .navbar-brand {
height: auto;
}
.navbar-default .navbar-brand img {
max-width: 100%;
}
.navbar-default .navbar-brand img.tag-line {
height: 20px;
}
.navbar-default .navbar-nav > li {
margin-top: 16px;
margin-bottom: 16px;
}
.navbar-default .navbar-nav > li + li {
margin-left: 1px;
}
.navbar-default .navbar-nav > li > a {
position: relative;
color: #000000;
text-transform: uppercase;
font-size: 17px;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
overflow: hidden;
background: 0 0;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
line-height:1;
}
.navbar-default .navbar-right > li > a{
color:#0e4d88;
}
.navbar-default .navbar-nav > li > a:before {
content: “”;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #034e8a;
border-radius: 100%;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.navbar-default .navbar-nav > li.open > a,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover {
color: #fff !important;
border-radius: 4px;
}
.navbar-default .navbar-nav > li.open > a:before,
.navbar-default .navbar-nav > li > a:focus:before,
.navbar-default .navbar-nav > li > a:hover:before {
-webkit-transform: scale(2);
transform: scale(2);
}
.navbar-default .navbar-nav > li.dropdown {
position: relative;
}
@media (min-width: 768px) {
.navbar-default .navbar-nav > li.dropdown > .dropdown-menu {
min-width: 280px !important;
}
}
.navbar-default .navbar-nav > li.dropdown > .dropdown-menu {
left: 50%;
right: auto;
transform: translate(-50%, 0);
background: #fff;
padding: 0;
padding-top: 10px;
box-shadow: none;
border: none;
}
.navbar-default .navbar-nav > li.dropdown > .dropdown-menu > ul {
background: #fff;
padding: 5px 0;
margin: 0;
position: relative;
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.navbar-default .navbar-nav > li.dropdown > .dropdown-menu > ul:after {
position: absolute;
content: “”;
top: -15px;
left: 0;
right: 0;
width: 15px;
height: 15px;
margin: 0 auto;
border: 7.5px solid transparent;
border-bottom-color: #fff;
}
.navbar-default .navbar-nav > li.dropdown > .dropdown-menu > ul > li > a {
font-size: 14px;
color: #000;
font-family: ‘Lato-Regular’;
padding: 7px 25px;
display: block;
text-decoration: none;
}
.navbar-default .navbar-nav > li.dropdown > .dropdown-menu > ul > li > a:hover {
background: #034e8a;
color: #fff;
}
.navbar-default .navbar-nav > .active > a {
background: #034e8a;
color: #fff;
border-radius: 4px;
}
@media (max-width:767px){
.navbar-default .navbar-brand img {
height:40px;
}
button.navbar-toggle{
height:40px;
width:40px;
text-align:center;
padding:0;
line-height:40px;
font-size:20px;
margin-top:15px;
margin-bottom:15px;
background:#08518c !important;
color:#fff !important;
border:none;
}
button.navbar-toggle .glyphicon{
line-height:inherit;
position:static;
}
.container>.navbar-collapse{
margin-left:-15px !important;
margin-right:-15px !important;
}
.navbar-toggle:focus,
.navbar-toggle:hover{
background:#08518c !important;
color:#fff !important
}
.navbar-default .navbar-nav>li{
margin:0;
}
.navbar-default .navbar-nav>li>a{
padding:7px 15px;
}
.navbar-default .navbar-nav>li.dropdown>.dropdown-menu{
transform: translate(0) !important;
box-shadow: none;
}
.navbar-default .navbar-nav > .active > a{
border-radius:0;
}
}

Step 3) Add jQuery:

(function ($) {
$(function () {
$(window).on(‘scroll’, function () {
var _fixed_height = $(‘header > .navbar’).height();
var _win_scoll = $(this).scrollTop();
var _header = $(‘header’);
if (_win_scoll > _fixed_height && !_header.hasClass(‘sticky’))
{
_header.addClass(‘sticky’);
} else if (_win_scoll <= _fixed_height && _header.hasClass(‘sticky’))
{
_header.removeClass(‘sticky’);
}
});
});
})(jQuery);

osomwebBootstrap Sticky Navbar With Dropdown

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *