"Custom Navbar example"
Bootstrap 3.0.0 Snippet by sachinkul6185@gmail.com

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<header class="header">
<div class="container">
<div class="col-md-3">
<a class="logo" href="#"><img src="http://streamingmuseum.org/assets/uploads/GoogleLogo-web.jpg" alt="sachinkul6185@gmail.com" /></a>
</div>
<div class="col-md-9">
<div class="navgation">
<ul>
<li class="non-mega"><a href="#">Home</a></li>
<li class="currnt-menu-item"><a href="#">service</a></li>
<li class="non-mega"><a href="#">Conatct us</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Delhi</a></li>
<li><a href="#">Mumbai</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Chennai</a></li>
<li><a href="#">Hospital</a></li>
<li><a href="#">Bollywood</a></li>
<li><a href="#">Sahrukah khan</a>
</li>
<li><a href="#">Passport</a></li>
</ul>
</li>
<li><a href="#">Indian</a></li>
<li><a href="#">US /Uk</a></li>
<li><a href="#">GULF</a></li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
*{ transition: all .5s ease; -moz-transition: all .5s ease; -webkit-transition: all .5s ease;}
.logo{margin:5px 0}
.header{ width: 100%;
float: left;
box-shadow: 0 0 5px #888;
position: fixed;
left: 0;
right: 0;
z-index: 99999;}
.navgation{width:100%;float:left;}
.navgation ul{margin:0px;padding:0px;list-style:none;float:right; position: relative;}
.navgation ul li{float:left;line-height:90px; }
.navgation ul li a{padding: 8px 14px 8px;margin:0 2px;font-size: 14px;text-transform: capitalize;color: #1f1f1f;color:#191919;position: relative;font-weight:600;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;}
.navgation ul li a:hover{background:#78bd46;coloR:#fff;text-decoration:none;}
.navgation ul li.currnt-menu-item a{background: #78bd46;coloR:#fff;text-decoration:none;}
.navgation ul ul{display:none;position:absolute;top:100%;left:0px; right:0; background:#fff;border:1px solid #ccc;width:200px;border-top:2px solid #78bd46}
.navgation ul ul:before{ position: absolute;
left: 25px;
top: -22px;
border: 10px solid transparent;
border-bottom: 10px solid #78bd46;
content: "";
z-index: 9999;
}
.navgation ul li:hover > ul{display:block;}
.navgation ul ul li{ line-height: 20px; display: block; float: none;padding:0 10px;position:relative}
.navgation ul ul li a{ padding:10px 0px;display:block; margin:0 0px; border-bottom:1px solid #ccc; font-size: 14px;font-weight:400; border-radius:0; text-transform: uppercase; color: #1f1f1f;}
.navgation ul ul li a:hover{background:transparent;coloR:#78bd46;padding-left:5px;}
.navgation ul ul li ul{display:none; left:100%;top:0;}
.navgation ul ul li:hover > ul{display:block}
.navgation ul li.mega ul{width:700px;left:0;}
.navgation ul li.non-mega{position:relative;}
.navgation ul li.mega .mega-menu-store li{width:25%; float: left;}
.navgation ul li.mega .mega-menu-store li h2{margin: 0;padding: 10px 0 0 0;font-size: 17px;line-height: 25px;border-bottom: 2px solid #78bd46;display: inline-block;}
.navgation ul li.mega .mega-menu-store li a{padding:5px 0}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Bootstrap Wizard
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Bootstrap 4 Navbar with Icon Top
Transparent Sticky NavBar

Questions / Comments: