"navbar"
Bootstrap 3.3.0 Snippet by MTaqi

<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 ----------> <div class="navbar navbar-fixed-top navbar-inverse" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/"><i class="sprite-icon-dart-logo"></i></a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown=toggle" data-toggle="dropdown"> Get Started <span class="caret"></span> </a> <ul class="dropdown-menu"> <i class="sprite-icon-dd-tip"></i> <li><a href="/codelabs/darrrt/">Learn Dart in Minutes</a></li> <li><a href="https://dartpad.dartlang.org">Try Dart: DartPad</a></li> <li><a href="/downloads/">Download Dart</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Fundamentals <span class="caret"></span> </a> <ul class="dropdown-menu"> <i class="sprite-icon-dd-tip"></i> <li><a href="/docs/dart-up-and-running/ch02.html">Language Tour</a></li> <li><a href="/docs/dart-up-and-running/ch03.html">Library Tour</a></li> <li><a href="/docs/">Programmer's Guide</a></li> <li class="divider"></li> <li><a href="/tools/">Dart Tools</a></li> <li><a href="/tools/pub/">Pub Package and Asset Manager</a></li> <li class="divider"></li> <li><a href="/docs/tutorials/get-started/">Tutorial: Get Started</a></li> <li><a href="/docs/tutorials/shared-pkgs/">Tutorial: Packages</a></li> <li><a href="/docs/tutorials/futures/">Tutorial: Async</a></li> <li class="divider"></li> <li><a href="/effective-dart/">Effective Dart</a></li> <li><a href="https://api.dartlang.org">API Reference</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Web<span class="caret"></span> </a> <ul class="dropdown-menu"> <i class="sprite-icon-dd-tip"></i> <li><a href="https://angular.io/dart">Angular</a></li> <li><a href="https://github.com/dart-lang/polymer-dart/wiki">Polymer</a></li> <li class="divider"></li> <i class="sprite-icon-dd-tip"></i> <li><a href="/docs/tutorials/connect-dart-html/">Tutorial: HTML</a></li> <li><a href="/docs/tutorials/fetchdata/">Tutorial: Fetch Data</a></li> <li class="divider"></li> <i class="sprite-icon-dd-tip"></i> <li><a href="https://github.com/dart-lang/googleapis#google-apis-client-libraries-with-dart">Google APIs Client Libraries</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Server <span class="caret"></span> </a> <ul class="dropdown-menu"> <i class="sprite-icon-dd-tip"></i> <li><a href="https://dart-lang.github.io/server/">An Overview of Dart on the Server</a></li> <li class="divider"></li> <li><a href="https://dart-lang.github.io/server/codelab/">Code Lab: Write a Server App</a></li> <li><a href="/docs/tutorials/cmdline/">Tutorial: Basic Command-Line Apps</a></li> <li><a href="/docs/tutorials/httpserver/">Tutorial: HTTP Servers and Clients</a></li> <li class="divider"></li> <li><a href="https://dart-lang.github.io/server/google-cloud-platform">Using Google Cloud Platform</a></li> <i class="sprite-icon-dd-tip"></i> <li><a href="https://github.com/dart-lang/googleapis#google-apis-client-libraries-with-dart">Using Google APIs from Your Server</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> More <span class="caret"></span> </a> <ul class="dropdown-menu"> <i class="sprite-icon-dd-tip"></i> <li><a href="/samples/">Code Samples</a></li> <li><a href="/docs/synonyms/">Synonyms with Other Languages</a></li> <li><a href="/dart-by-example/">Dart by Example</a></li> <li class="divider"></li> <li><a href="/articles/">Articles</a></li> <li><a href="/docs/spec/">Language Specification</a></li> <li class="divider"></li> <li><a href="/community/who-uses-dart.html">Who Uses Dart</a></li> <li><a href="/support/faq.html">FAQ</a></li> <li><a href="/logos/">Logos and Colors</a></li> <li><a href="/books/">Books</a></li> <li><a href="/performance/">Performance</a></li> <li class="divider"></li> <i class="sprite-icon-dd-tip"></i> <li><a href="/devices/">Dart on Devices</a></li> <li class="divider"></li> <li><a href="/slides/">Presentations</a></li> <li><a href="/dart-tips/">Dart Tips Videos</a></li> <li><a href="/support/">Support</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li> <form class="navbar-search" action="/search.html" id="cse-search-box"> <input type="hidden" name="cx" value="011220921317074318178:i4mscbaxtru"> <input type="hidden" name="ie" value="UTF-8"> <input type="hidden" name="hl" value="en"> <input type="search" name="q" class="search-query placeholder-position-fix form-control" id="q" autocomplete="off" placeholder="Search"> </form> </li> <li><a href="https://twitter.com/dart_lang" class="btn"><i class="sprite-icon-social-twitter"></i></a></li> <li><a href="https://plus.google.com/+dartlang/posts" class="btn"><i class="sprite-icon-social-gplus"></i></a></li> </ul> </div><!-- /.nav-collapse --> </div><!-- /.container --> </div>
.nav>li>a { padding: 5px 15px } @media print { .nav>li>a { padding: 1px 15px } } .navbar { min-height: 65px; background: #fff; -webkit-box-shadow: 0 2px 2px rgba(50, 50, 50, 0.15); -moz-box-shadow: 0 2px 2px rgba(50, 50, 50, 0.15); box-shadow: 0 2px 2px rgba(50, 50, 50, 0.15) } .navbar-nav>li>a { font-family: 'Montserrat', sans-serif; text-decoration: none; color: #464646; text-transform: uppercase; font-size: 12px; line-height: 18px } @media(min-width:768px) { .navbar-nav>li>a { padding-top: 25px } } .navbar-inverse .navbar-nav>li>a { color: #464646 } .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #000 } .navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #000; border-bottom-color: #000 } .navbar-inverse .navbar-nav>.dropdown>a .caret { color: #464646 } @media(max-width:767px) { .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus { color: #428bca } } .navbar-header { min-height: 65px } .navbar .navbar-brand { display: block; width: 117px; height: 33px; margin-right: 50px } ::-webkit-input-placeholder { padding-top: 4px } :-moz-placeholder { padding-top: 4px } ::-moz-placeholder { padding-top: 4px } :-ms-input-placeholder { padding-top: 4px } @media(max-width:768px) { .nav.navbar-right { display: none } } .nav.navbar-right>li>a { padding-left: 2px; padding-right: 2px } .navbar-toggle { margin-top: 16px } .navbar-inverse { border: 0 } .navbar-inverse .navbar-toggle .icon-bar { background-color: #333 } .navbar-inverse .navbar-toggle:hover .icon-bar, .navbar-inverse .navbar-toggle:focus .icon-bar { background-color: #fff } .navbar-inverse .navbar-toggle.collapsed:hover .icon-bar { background-color: #fff !important } .navbar-inverse .navbar-toggle.collapsed:focus .icon-bar, .navbar-inverse .navbar-toggle.collapsed:active .icon-bar { background-color: #333 !important } .navbar-inverse .navbar-toggle.mobile-deactivated:focus .icon-bar, .navbar-inverse .navbar-toggle.mobile-deactivated:active .icon-bar, .navbar-inverse .navbar-toggle.mobile-deactivated:hover .icon-bar { background-color: #333 !important } .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background: #fff } .navbar-nav>li>.dropdown-menu { text-align: left } .navbar-collapse { -webkit-overflow-scrolling: touch } @media(max-width:768px) { .navbar-nav>li>.dropdown-menu .dd-tip { display: none } } .navbar-nav>li>.dropdown-menu>li>a { text-decoration: none } @media(max-width:1000px) { .navbar-right { display: none } } .navbar-search .search-query { margin-bottom: 0; padding: 4px 6px; font-size: 13px; font-weight: normal; line-height: 1; margin-top: 20px; margin-right: 10px; height: 30px } .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #1485c3 } .navbar-inverse .navbar-nav>.dropdown>a .caret { margin-top: -0.22em } .navbar-inverse .navbar-nav>.open>a .caret, .navbar-inverse .navbar-nav>.open>a:hover .caret, .navbar-inverse .navbar-nav>.open>a:focus .caret { border-top-color: #1485c3; border-bottom-color: #1485c3 } .navbar-inverse .navbar-toggle.collapsed:focus, .navbar-inverse .navbar-toggle.collapsed:active { background-color: #fff !important } .navbar-inverse .navbar-toggle.mobile-deactivated:active, .navbar-inverse .navbar-toggle.mobile-deactivated:hover, .navbar-inverse .navbar-toggle.mobile-deactivated:focus { background-color: #fff !important }

Related: See More


Questions / Comments: