Bootstrap 3 Template
This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.
by shuja uddin
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="category-header col-md-12">
<div class="col-md-3 col-sm-3 col-xs-12 category-col category-col-1">
<img src="./images/logo.png" class="img-responsive center-block">
</div>
<div class="col-md-offset-1 col-md-2 col-sm-3 col-xs-4 category-col category-col-2">
<div class="dropdown">
<a href="dropdownMenu1" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">CATEGORIES <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li class="col-sm-2">
<ul>
<li class="dropdown-header">Home DECOR</li>
<li><a href="#">Decor</a></li>
<li><a href="#">Storage & Cleaning</a></li>
<li><a href="#">Craft & Sewing</a></li>
<li><a href="#">Bar</a></li>
<li class="mb30"></li>
<li class="dropdown-header">Accessories</li>
<li><a href="#">Bags</a></li>
<li><a href="#">Wear</a></li>
</ul>
</li>
<li class="col-sm-2">
<ul>
<li class="dropdown-header">kitchen & tabletop</li>
<li><a href="#">Coffee & Tea</a></li>
<li><a href="#">Cooking & Baking</a></li>
<li><a href="#">Cutlery & Cutting</a></li>
<li><a href="#">Serving</a></li>
<li><a href="#">Food Storage</a></li>
<li class="mb30"></li>
<li class="dropdown-header">OFFICE</li>
<li><a href="#">Writing Instruments</a></li>
</ul>
</li>
<li class="col-sm-2">
<ul>
<li...CSS
/* top header */
.top-search-input{
width: 224px !Important;
height: 39px;
font-family: 'latoitalic';
font-size: 13px;
color: #9e9ea6;
background-color: #f7f7f9;
border: none;
box-shadow: none;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
display: inline;
float: left;
}
.top-search-input.form-control:focus{
box-shadow:none;
}
.top-header .btn-lg.custom-btn-group{
font-size: 13px;
background-color: #454553;
font-family: 'latobold';
color:#a2a2a9;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
z-index: 5px;
}
.custom-input-group{
margin: 0 auto;
}
.top-header-right li{
list-style: none;
display: inline-block;
border-right: 1px solid #eee;
}
.top-header-right li a{
color:#86868f;
}
.top-header-right li a{
padding-left: 20px;
padding-right: 20px;
}
.navbar-default.top-header {
background-color: #fff;
}
.top-header .navbar-nav>li>a{
padding-top: 0px;
padding-bottom: 0px;
line-height: normal;
height: 40px;
vertical-align: middle;
display: table-cell;
}
.top-header ul.nav.navbar-nav {
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
.top-header.category-header ul.nav.navbar-nav {
padding-top: 0px;
padding-bottom: 0px;
}
.top-header ul.nav.navbar-nav li:last-child{
border-right:0px;
}
.input-group.custom-input-group:after {
content: url(../images/pointer.png);
width: 15px;
height: 20px;
position: absolute;
right: 85px;
top: 11px;
z-index: 5;
}
.navbar.top-header{
margin-bottom: 0px;
}
/* top header */
/* catergory header */
.category-header li.logo{
padding-top: 20px
}
.category-header li.mega-dropdown{
padding-top: 35px;
padding-left: 80px;
}
.category-header .dropdown.mega-dropdown>a,.category-header .dropdown.mega-dropdown>a:hover,
.category-header .dropdown.mega-dropdown>a:focus{
color: #49a0d5;
...JavaScript
/* Latest compiled and minified JavaScript included as External Resource */