<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" style="padding-top:10px" href="#"><img src="https://dl.dropboxusercontent.com/s/k6d5atcwj880ugn/atltransit-orig-color.png" width="180"></a> </div> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#">Plan a trip</a></li> <li><a href="#">Status updates</a></li> <li><a href="#">Maps</a></li> <li><a href="#">Fares & payments</a></li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">More... <span class="glyphicon glyphicon-chevron-down pull-right"></span></a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-4 col-xs-6"> <ul> <li class="dropdown-header">Maps</li> <li><a href="#">System Maps</a></li> <li><a href="#">Interactive Map</a></li> <li><a href="#">Park 'n' Ride stations</a></li> <li><a href="#">Wayfinding</a></li> <li class="divider"></li> <li class="dropdown-header">Tops</li> <li><a href="#">Good Typography</a></li> </ul> </li> <li class="col-sm-4 col-xs-6"> <ul> <li class="dropdown-header">Jackets</li> <li><a href="#">Easy to customize</a></li> <li><a href="#">Glyphicons</a></li> <li><a href="#">Pull Right Elements</a></li> <li class="divider"></li> <li class="dropdown-header">Pants</li> <li><a href="#">Coloured Headers</a></li> <li><a href="#">Primary Buttons & Default</a></li> <li><a href="#">Calls to action</a></li> </ul> </li> <li class="col-sm-4 col-xs-6"> <ul> <li class="dropdown-header">Accessories</li> <li><a href="#">Default Navbar</a></li> <li><a href="#">Lovely Fonts</a></li> <li><a href="#">Responsive Dropdown </a></li> <li class="divider"></li> <li class="dropdown-header">Newsletter</li> <form class="form" role="form"> <div class="form-group"> <label class="sr-only" for="email">Email address</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <button type="submit" class="btn btn-primary btn-block">Sign up!</button> </form> </ul> </li> </ul> </li> </ul> <div class="col-sm-1 pull-right row"> <form class="col-xs-12 col-sm-3 navbar-form navbar-right navbar-input-group visible-*-inline" role="search"> <div class="input-group"> <input type="text" class="form-control navbar-search" placeholder="Search"> <span class="input-group-btn"> <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> </span> </div> </form> </div> </div><!-- /.nav-collapse --> </nav> </div> <div>Content here</div>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); body { font-family: 'Open Sans', 'sans-serif'; background:#f0f0f0; } .navbar-input-group { font-size: 0px; /*removes whitespace between button and input*/ } .navbar-input-group input { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .navbar-input-group .btn { border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-left: 0px; } @media (max-width: 767px) { .navbar-search { width: 100%; } } @media (min-width: 767px) { .navbar-search { width: 120px !important; } } .navbar-nav>li>.dropdown-menu { /*margin-top:20px; border-top-left-radius:4px; border-top-right-radius:4px;*/ } /*.navbar-default .navbar-nav>li>a { width:200px; font-weight:bold; }*/ .mega-dropdown { position: static !important; /*width:100%;*/ } .dropdown-menu{ background-color: #EFF6FD !important; } /* CSS goes here */ .open>a { background-color: #EFF6FD !important; color: #428bca !important; } .navabar-nav>li { margin-bottom: 50px !important; } @media (min-width: 767px) { /* CSS goes here */ .navbar-nav>li:not(.open)>a:hover { background-color: #ddd !important; } .navbar-inverse.navbar-nav>li:not(.open)>a { color: #fff !important; } } .mega-dropdown-menu { padding: 20px 0px; width: 100%; box-shadow: none; -webkit-box-shadow: none; background-color: #EFF6FD; } /* .mega-dropdown-menu:before { content: ""; border-bottom: 15px solid #fff; border-right: 17px solid transparent; border-left: 17px solid transparent; position: absolute; top: -15px; left: 580px; z-index: 10; } .mega-dropdown-menu:after { content: ""; border-bottom: 17px solid #ccc; border-right: 19px solid transparent; border-left: 19px solid transparent; position: absolute; top: -17px; left: 578px; z-index: 8; } */ .mega-dropdown-menu > li > ul { padding: 0; margin: 0; } .mega-dropdown-menu > li > ul > li { list-style: none; } .mega-dropdown-menu > li > ul > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #999; white-space: normal; } .mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; color: #444; background-color: #f5f5f5; } .mega-dropdown-menu .dropdown-header { color: #428bca; font-size: 18px; font-weight:bold; } .mega-dropdown-menu form { margin:3px 20px; } .mega-dropdown-menu .form-group { margin-bottom: 3px; }