"Sliding Nav"
Bootstrap 3.3.0 Snippet by bnelson911

<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-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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" href="#">Michael Charles Criste</a> --> </div> <div id="navbar" class="navbar-collapse collapse"> <ul id="primary-menu" class="nav navbar-nav navbar-right"> <li><a class="navbar-brand" href="#">Brand Name</a></li> </ul> <ul id="secondary-menu" class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Work</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container"> <div class="row"> <hp>Content here.</hp> </div> </div>
body { padding-top:90px; } #primary-menu { visibility: visible; } #secondary-menu { displayL none; } a:hover, a:active, a:focus { text-decoration: none; } .navbar-toggle { display: block; float: left; margin-left: 15px; } a:hover { text-decoration: none; } .modal-backdrop { background-color: #89b3f7; } .form-control { color: #fff; background-color: #498af3; border: none; } #name::-webkit-input-placeholder, #email::-webkit-input-placeholder, #phone::-webkit-input-placeholder, #message::-webkit-input-placeholder { /* WebKit browsers */ color: #fff; } #name:-moz-placeholder, #email:-moz-placeholder, #phone:-moz-placeholder, #message:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #fff; opacity: 1; } #name::-moz-placeholder, #email::-moz-placeholder, #phone::-moz-placeholder, #message::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #fff; opacity: 1; } #name:-ms-input-placeholder, #email:-ms-input-placeholder, #phone:-ms-input-placeholder, #message:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #fff; } .modal-content { background-color: transparent; box-shadow: none; } .modal-header, .modal-body { border-bottom: none; } .modal-footer{ border-top: none; } h1, h2, h3, h4, h5, h6 { color: #498af3; } h1, h2, h3 { font-weight:800; } /* delete this when done and first line of .navbar-inverse */ .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus { color: #3F4342; background-color: #f4f4f4; } .navbar-inverse { background-color: #f4f4f4; border: none; } .navbar-toggle { margin-top: 15px; margin-bottom: 15px; } .navbar-toggle .icon-bar { width: 35px; height: 5px; } .nav > li > a { position: relative; display: block; padding: 10px 35px; font-size: 18px; text-transform: uppercase; } header { background-color: #E4E4E4; } .modal-dialog { margin-top:80px; } @media (min-width: 768px) { .navbar-nav > li > a { padding-top: 26px; padding-bottom: 26px; } } h2 { font-size: 24px; font-weight: 300; line-height: 1.4; }
$( "button" ).click(function() { $('#primary-menu').collapse('hide'); $('#secondary-menu').collapse('show'); });

Related: See More


Questions / Comments: