"Flipkart like navbar"
Bootstrap 3.3.0 Snippet by chawlaaditya8

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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<div class="flipkart-navbar">
<div class="container">
<div class="row row1">
<ul class="pull-right">
<li class="upper-links"><a class="links" href="https://github.com/chawlaaditya8/snippets">Link 1</a></li>
<li class="upper-links"><a class="links" href="https://github.com/chawlaaditya8/snippets">Link 2</a></li>
<li class="upper-links"><a class="links" href="https://github.com/chawlaaditya8/snippets">Link 3</a></li>
<li class="upper-links"><a class="links" href="https://github.com/chawlaaditya8/snippets">Link 4</a></li>
<li class="upper-links"><a class="links" href="https://github.com/chawlaaditya8/snippets">Link 5</a></li>
<li class="upper-links"><a class="links" href="https://github.com/chawlaaditya8/snippets">Link 6</a></li>
<li class="upper-links"><a class="links" href="https://github.com/chawlaaditya8/snippets">
<svg class="" width="16px" height="12px" style="overflow: visible;">
<path d="M8.037 17.546c1.487 0 2.417-.93 2.417-2.417H5.62c0 1.486.93 2.415 2.417 2.415m5.315-6.463v-2.97h-.005c-.044-3.266-1.67-5.46-4.337-5.98v-.81C9.01.622 8.436.05 7.735.05 7.033.05 6.46.624 6.46 1.325v.808c-2.667.52-4.294 2.716-4.338 5.98h-.005v2.972l-1.843 1.42v1.376h14.92v-1.375l-1.842-1.42z" fill="#fff"></path>
</svg>
</a></li>
<li class="upper-links dropdown"><a class="links" href="https://github.com/chawlaaditya8/snippets">Dropdown</a>
<ul class="dropdown-menu">
<li class="profile-li"><a class="profile-links" href="https://github.com/chawlaaditya8/snippets">Link</a></li>
<li class="profile-li"><a class="profile-links" href="https://github.com/chawlaaditya8/snippets">Link</a></li>
<li class="profile-li"><a class="profile-links" href="https://github.com/chawlaaditya8/snippets">Link</a></li>
<li class="profile-li"><a class="profile-links" href="https://github.com/chawlaaditya8/snippets">Link</a></li>
<li class="profile-li"><a class="profile-links" href="https://github.com/chawlaaditya8/snippets">Link</a></li>
<li class="profile-li"><a class="profile-links" href="https://github.com/chawlaaditya8/snippets">Link</a></li>
<li class="profile-li"><a class="profile-links" href="https://github.com/chawlaaditya8/snippets">Link</a></li>
</ul>
</li>
</ul>
</div>
<div class="row row2">
<div class="col-md-2"><h1 style="margin:0px;">Brand</h1></div>
<div class="flipkart-navbar-search col-md-8">
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
36
37
.flipkart-navbar {
background-color: #2874f0;
color: #FFFFFF;
}
.row1{
padding-top: 10px;
}
.row2 {
padding-bottom: 20px;
}
.flipkart-navbar-input {
padding: 11px 16px;
border-radius: 2px 0 0 2px;
border: 0 none;
outline: 0 none;
font-size: 15px;
}
.flipkart-navbar-button {
background-color: #ffe11b;
border: 1px solid #ffe11b;
border-radius: 0 2px 2px 0;
color: #565656;
padding: 10px 0;
height: 43px;
cursor: pointer;
}
.cart-button {
background-color: #2469d9;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .23), inset 1px 1px 0 0 hsla(0, 0%, 100%, .2);
padding: 10px 0;
text-align: center;
height: 41px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

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

Questions / Comments: