"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 ---------->
body { padding-top:90px; } #secondary-menu { position: absolute; z-index: -1; height: 74px; right: 371px; top:0; background-color: #F8F8F8; } .primary-menu { overflow-y: hidden; height: 100%; max-height: 74px; transition-property: all; transition-duration: .5s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); overflow-x: hidden; background-color: #F8F8F8; padding-bottom: 21px; } .primary-menu.closed { max-height: 0px; } 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; }

Related: See More


Questions / Comments: