<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <form class="form-inline"> <div class="col-sm-6"> <input type="text" class="form-control" placeholder="Search" id="main-search" name=""> </div> <div class="input-group"> <input type="text" class="form-control postcode" placeholder="Enter postcode"> <input type="number" class="form-control distance input-group-addon " placeholder="" min="0" max="99999" step="10" value="10000"> </div> <button type="submit" class="btn"><i class="fa fa-search"></i></button> </div> </div> </form> <div class="col-sm-3"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <div class="dropdown-menu mega-dropdown-menu"> <div class="container-fluid"> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="men"> <ul class="nav-list list-inline"> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Running.png"><span>Running</span></a></li> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Basketball.png"><span>Basketball</span></a></li> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Football.png"><span>Football</span></a></li> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Soccer.png"><span>Soccer</span></a></li> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_MensTraining.png"><span>Men's Training</span></a></li> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_WomensTraining.png"><span>Women's Training</span></a></li> </ul> </div> </div> </li> </ul> </div><!-- /.navbar-collapse --> </div> </nav>

.mega-dropdown { position: static !important; } .mega-dropdown-menu { padding: 20px 15px 15px; text-align: center; width: 100%; } .search-form .form-inline .form-control { height: 40px; padding: 6px 12px; font-family: "Gotham", Arial, sans-serif; font-size: 12px; line-height: 1.42857143; color: #525252; text-align: center; background-color: #f4f3f3; } .search-form .form-control::-moz-placeholder { color: #828282; opacity: 1; } .search-form .form-control:-ms-input-placeholder { color: #828282; } .search-form .form-control::-webkit-input-placeholder { color: #828282; }