<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 ----------> <nav class="navbar navbar-default navbar-static-top navbar-inverse" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/" class="navbar-brand">Brand Name</a> </div> <div id="navbar-menu" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <!--- Include all menu items, below, regardless of display width. ---> <!--- This allows the full menu to be displayed on extra-small (xs) devices. ---> <!--- Hide menu items depending on the available display width. ---> <li><a href="/calendar/">Calendar</a></li> <li><a href="/journal/">Journal</a></li> <li><a href="/shows/">Shows</a></li> <li><a href="/venues/">Venues</a></li> <!--- Hide the following menu items depending on the available display width. ---> <!--- Menu items that can't fit on the main nav bar will be displayed in the "More" dropdown menu. ---> <li class="hidden-sm"><a href="/blackouts/">Blackouts</a></li> <li class="hidden-sm"><a href="/tasks/">Tasks</a></li> <li class="hidden-sm hidden-md"><a href="/songs/">Songs</a></li> <li class="hidden-sm hidden-md"><a href="/testimonials/">Testimonials</a></li> <li class="hidden-sm hidden-md hidden-lg"><a href="/artists/">Artists</a></li> <li class="hidden-sm hidden-md hidden-lg"><a href="/categories/">Categories</a></li> <li class="hidden-sm hidden-md hidden-lg"><a href="/cities/">Cities</a></li> <li class="hidden-sm hidden-md hidden-lg"><a href="/reports/">Reports</a></li> <li class="hidden-sm hidden-md hidden-lg"><a href="/users/">Users</a></li> <!--- The "More" dropdown menu item will be hidden on extra-small displays. ---> <li class="dropdown hidden-xs"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a> <ul class="dropdown-menu"> <li class="hidden-lg hidden-md"><a href="/blackouts/">Blackouts</a></li> <li class="hidden-lg hidden-md"><a href="/tasks/">Tasks</a></li> <li class="hidden-lg"><a href="/songs/">Songs</a></li> <li class="hidden-lg"><a href="/testimonials/">Testimonials</a></li> <li class="divider hidden-lg"></li> <!--- These menu items will only appear in the "More" dropdown menu. ---> <li><a href="/artists/">Artists</a></li> <li><a href="/categories/">Categories</a></li> <li><a href="/cities/">Cities</a></li> <li><a href="/reports/">Reports</a></li> <li><a href="/users/">Users</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="/?signout" id="signout"><span class="glyphicon glyphicon-lock"></span> Sign Out</a></li> </ul> </div> </div>