Skip to content

Instantly share code, notes, and snippets.

@seamusleahy
Created March 13, 2012 12:41
Show Gist options
  • Save seamusleahy/2028532 to your computer and use it in GitHub Desktop.
Save seamusleahy/2028532 to your computer and use it in GitHub Desktop.
Adding mobile-only show/hide toggle button to your navigation with Twitter Bootstrap
<!-- I noticed that Twitter Bootstrap has a feature to make your navigation work on mobile.
It just appears that the documentation is missing for it.
Take the navigation bar and then add a toggle button and wrap the navigation list in '.nav-collapse'.
-->
<nav class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- Add toggle button -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/">Branding</a>
<!-- Wrap the navigation list in .nav-collapse -->
<div class="nav-collapse">
<ul class="nav" role="navigation">
<li><a href="/">Overview</a></li>
<li><a href="/about">About</a></li>
<!-- ... -->
</ul>
</div>
</div>
</div>
</nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment