<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="#">Brand</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 the Boat</span>
<span class="visible-xs">About</span>
</a>
</li>
<li class="hidden-xs">
<a href="#">
<span class="menu-icon fa fa-picture-o"></span>
Photos
</a>
</li>
<li>
<a href="#">
<span class="menu-icon fa fa-ship"></span>
Cruises
</a>
</li>
<li class="hidden-xs">
<a href="#">
<span class="menu-icon fa fa-bell-o"></span>
Reservations
</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>
@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.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;
});
});
