"Mobile Nav Bar"
Bootstrap 3.3.0 Snippet by mouse0270

<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> <section class="container"> <div class="col-xs-12 col-sm-12"> <p class="lead text-center">Inclusive capitalism shift donors revitalize celebrate; hack elevate Kony 2012 shifting landscape generosity. Emergent relief economic independence volunteer informal economies life-saving visionary, growth equality community immunize civic engagement. Crisis management forward-thinking, focus on impact giving, policy healthcare solve; cornerstone time of extraordinary change human experience making progress. Advocate catalyze, affordable health care, outcomes justice invest. Care; citizens of change compassion solution, gender equality accelerate social worker equity donation foster. Challenges of our times working alongside UNHCR Oxfam global health country enable medical impact achieve. Long-term, UNICEF beneficiaries honesty, meaningful work combat malaria, foundation; urban disrupt liberal catalyst effectiveness.</p> </div> </section> <section class="container"> <div class="col-xs-12 col-sm-12"> <p class="lead text-center">Network working families, Aga Khan, collaborative consumption plumpy'nut end hunger poverty readiness legitimize proper resources social good humanitarian relief medical supplies. Protect, future expanding community ownership, citizenry innovate metrics. Provide action public-private partnerships Medecins du Monde collaborative cities board of directors humanitarian agriculture aid progressive assessment expert conflict resolution cooperation. Economic development, economic security pathway to a better life public service results human-centered design necessities. Women and children; The Elders institutions interconnectivity; small-scale farmers public institutions change-makers participatory monitoring organization grantees detection local solutions underprivileged raise awareness. Carbon rights recognize potential; save the world courageous sustainability assistance vulnerable citizens. Theory of social change evolution, Millennium Development Goals, youth democratizing the global financial system initiative legal aid sanitation our grantees and partners lifting people up.</p> </div> </section> <section class="container"> <div class="col-xs-12 col-sm-12"> <p class="lead text-center">Cross-cultural, global leaders equal opportunity social, social movement insurmountable challenges breakthrough insights honor. Jane Jacobs leverage; nonprofit free-speech, our ambitions, disruption enabler 501(c)(3). Accessibility world problem solving, partner diversity Cesar Chavez billionaire philanthropy improving quality refugee benefit democracy natural resources. Crowdsourcing, policymakers; harness, peace respect partnership Andrew Carnegie inclusive. Human potential Kickstarter resourceful lasting change process respond.</p> </div> </section>
@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; }); });

Related: See More


Questions / Comments:

The dropdown menu (w/ submenu) doesn't display properly

Viet Nguyen () - 8 years ago - Reply 0


The sub-menu when you click on MORE disappears after a click. I believe this is a bug

Vic () - 8 years ago - Reply 0


question I used this for example on my browser works fine it also responsive when you make the screen bigger o media screen size but when i open my app on mobile browser it just does not work the mobile menu any idea i'm using spring 4.2 and all my dependencies are include on my deployment assembly resources everything

carlos () - 8 years ago - Reply 0


hi great execution and idea.. one simple question: what has do be done to set the menu sticky on top instead of slide them down if menu opens?

Sebastian () - 8 years ago - Reply 0


I've created 4 level submenu
e.g., Top ->Test, Top1->Submenu1->Submenu2->Submenu3, Top2->Test->test

In mobile When I touch Submenu2, it shows options like menu button click that means I am unable to access Submenu3.

Please modify above code for nested submenu (about 4 or 5 level) and check it in mobile.

I've got the solution for above problem-
bootstrap-submenu-2.0.0
http://vsn4ik.github.io/boo...

ravindra ahar () - 9 years ago - Reply 0


How can I make the icons visible on desktop view. they're only showing on mobile display. Thanks in advance

bigshot () - 9 years ago - Reply 0


change line 100 to `display: inline`. Be warned you may be required to do more styling to make this look good though.

mouse0270 () - 9 years ago - Reply 0


I may be asking alot....but is there any help on how I can make the icons smaller and also make the fit smoothly until the screen changes to mobile view.

bigshot () - 9 years ago - Reply 0


Also, please email me at rmcintosh (at) remabledesigns (dot) com

I hate disqus because I miss many of the request people as for. For example I only noticed this message because I happened to be looking at someone elses.

mouse0270 () - 9 years ago - Reply 0


I would need to see a demo of your site or demo to be able to customize it for your liking.

mouse0270 () - 9 years ago - Reply 0


Great, but, you know why my <li> don't appear in mobile view?

Boreck Mc () - 9 years ago - Reply 0


Its because the Font awesome is loaded from a CDN an you're trying to load the page offline. The way you can view your icons when you're offline is to download font awesome (Fonts and CSS) and load them into their respective project folders.

bigshot () - 9 years ago - Reply 0


or just add "http:" before the two "/" on the css import. That should also work,.

mouse0270 () - 9 years ago - Reply 0


I would need to see an example to see why this may be happening.

mouse0270 () - 9 years ago - Reply 0


This is simply (IMHO) the most awesome snippet I've seen so far on bootstrap navbar. You're a hero to me!!

bigshot () - 9 years ago - Reply 0


Thank you. I think this makes the navbar a lot more useful when on a mobile screen. Please remember to favorite this snippet!

mouse0270 () - 9 years ago - Reply 0


wow, this is great!!

fon () - 9 years ago - Reply 0


Thank you!

mouse0270 () - 9 years ago - Reply 0