<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-more-overlay"></div> <nav class="navbar navbar-inverse navbar-fixed-top animate"> <div class="container navbar-more visible-xs"> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-default" type="submit">Submit</button> </span> </div> </div> </form> <ul class="nav navbar-nav"> <li> <a href="#"> <span class="menu-icon fa fa-picture-o"></span> Photos </a> </li> <li> <a href="#"> <span class="menu-icon fa fa-bell-o"></span> Reservations </a> </li> <li> <a href="#"> <span class="menu-icon fa fa-picture-o"></span> Photos </a> </li> <li> <a href="#"> <span class="menu-icon fa fa-bell-o"></span> Reservations </a> </li> <li> <a href="#"> <span class="menu-icon fa fa-picture-o"></span> Photos </a> </li> <li> <a href="#"> <span class="menu-icon fa fa-bell-o"></span> Reservations </a> </li> <li> <a href="#"> <span class="menu-icon fa fa-picture-o"></span> Photos </a> </li> <li> <a href="#"> <span class="menu-icon fa fa-bell-o"></span> Reservations </a> </li> <li> <a href="#"> <span class="menu-icon fa fa-picture-o"></span> Photos </a> </li> <li> <a href="#"> <span class="menu-icon fa fa-bell-o"></span> Reservations </a> </li> <li> <a href="#"> <span class="menu-icon fa fa-picture-o"></span> Photos </a> </li> <li> <a href="#"> <span class="menu-icon fa fa-bell-o"></span> Reservations </a> </li> <li> <a href="#"> <span class="menu-icon fa fa-picture-o"></span> Photos </a> </li> <li> <a href="#"> <span class="menu-icon fa fa-bell-o"></span> Reservations </a> </li> </ul> </div> <div class="container"> <div class="navbar-header hidden-xs"> <a class="navbar-brand" href="#">InterServer</a> </div> <ul class="nav navbar-nav navbar-right mobile-bar"> <li> <a href="#"> <span class="menu-icon fa fa-home"></span> Home </a> </li> <li> <a href="#"> <span class="menu-icon fa fa-info"></span> <span class="hidden-xs">About Us</span> <span class="visible-xs">About</span> </a> </li> <li class="hidden-xs"> <a href="#"> <span class="menu-icon fa fa-picture-o"></span> <span class="hidden-xs">VPS/Virtualized Hosting</span> <span class="visible-xs">VPS</span> </a> </li> <li> <a href="#"> <span class="menu-icon fa fa-ship"></span> <span class="hidden-xs">Web Hosting</span> <span class="visible-xs">Webhosting</span> </a> </li> <li class="hidden-xs"> <a href="#"> <span class="menu-icon fa fa-bell-o"></span> <span class="hidden-xs">Dedicated Servers</span> <span class="visible-xs">Dedicated</span> </a> </li> <li> <a href="#"> <span class="menu-icon fa fa-phone"></span> <span class="hidden-xs">Contact Us</span> <span class="visible-xs">Contact</span> </a> </li> <li class="visible-xs"> <a href="#navbar-more-show"> <span class="menu-icon fa fa-bars"></span> More </a> </li> </ul> </div> </nav> <section class="container"> <div class="col-xs-12 col-sm-12"> <p class="lead text-center"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id risus eu est convallis egestas. Aliquam sollicitudin sapien ac lectus facilisis placerat. Quisque aliquet ultricies lobortis. Aliquam sit amet lectus dapibus, tempus urna vitae, vulputate sem. Maecenas vel mauris ut nisl fringilla venenatis vitae dapibus quam. In quis vestibulum nisi. Nulla cursus, ante non imperdiet vestibulum, nulla ante congue turpis, vel egestas magna tellus sit amet lacus. Proin malesuada egestas gravida. Praesent id arcu dictum, malesuada arcu egestas, fringilla massa. Suspendisse rutrum lobortis justo, sit amet ullamcorper velit placerat sit amet. Nunc sit amet iaculis sapien. Cras fringilla magna id sem rhoncus mattis. </p> </div> </section> <section class="container"> <div class="col-xs-12 col-sm-12"> <p class="lead text-center">Ut rutrum elit et vehicula tincidunt. Cras in tempor leo, quis suscipit ligula. Curabitur consectetur sollicitudin arcu, a varius mauris placerat quis. Curabitur ac ultrices risus, ut convallis leo. Ut quis cursus nunc, vitae consequat arcu. Nam in lectus maximus, mollis lorem in, facilisis magna. Duis in dictum purus, sit amet tincidunt orci.</p> </div> </section>

@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"); html, body { height: 100%; } body { padding-top: 75px; } body.navbar-more-show { overflow: hidden; } .animate { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .navbar { height: calc(100%); max-height: 300px; -webkit-transform: translate(0px, calc(-100% + 69px)); transform: translate(0px, calc(-100% + 69px)); } .navbar .container:not(.navbar-more) { padding: 0px; } .navbar-more-overlay { background-color: rgba(102, 102, 102, 0.55); display: none; height: 100%; left: 0px; position: fixed; top: 0px; width: 100%; z-index: 1029; } .navbar-more-show > .navbar-more-overlay { display: block; } .navbar-more-show > .navbar { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } .navbar-nav.mobile-bar { list-style: none; -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-justify-content: space-around; justify-content: space-around; -webkit-flex-flow: row wrap; flex-flow: row wrap; -webkit-align-items: stretch; align-items: stretch; margin: 0px 0px; } .navbar-nav.mobile-bar > li { -webkit-flex-grow: 1; flex-grow: 1; text-align: center; } .navbar-nav.mobile-bar > li > a > span.menu-icon { display: block; font-size: 1.8em; } .navbar-more { background-color: rgb(255, 255, 255); height: calc(100% - 69px); overflow: auto; } .navbar-more .navbar-form { border-width: 0px; } .navbar-more .navbar-nav > li > a { color: rgb(64, 64, 64); } .navbar-more > .navbar-nav > li > a > span.menu-icon { margin-left: 10px; margin-right: 10px; } @media (min-width: 768px) { .navbar { height: auto; -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } .navbar-nav.mobile-bar { display: block; max-height: 64px; margin: 0px -15px; } .navbar-nav.mobile-bar > li > a > span.menu-icon { display: none; } }

$(document).ready(function() { $('a[href="#navbar-more-show"], .navbar-more-overlay').on('click', function(event) { event.preventDefault(); $('body').toggleClass('navbar-more-show'); if ($('body').hasClass('navbar-more-show')) { $('a[href="#navbar-more-show"]').closest('li').addClass('active'); }else{ $('a[href="#navbar-more-show"]').closest('li').removeClass('active'); } return false; }); });