rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Enable scrollable responsive nav bar

Browse Source 
Fixes #9007 in a hopefully decent way
This commit is contained in:
Mark Otto 2013-08-05 14:19:32 -07:00
parent 96136dbb56
commit c15f5a89a0
5 changed files with 78 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/nav-components.html
View File

@ -61,6 +61,8 @@
<li><a href="#navbar-fixed-bottom">Fixed bottom navbar</a></li>
<li><a href="#navbar-static-top">Static top navbar</a></li>
<li><a href="#navbar-responsive">Responsive navbar</a></li>
<li><a href="#navbar-scrollable">Scrollable responsive navbar</a></li>
<li><a href="#navbar-inverted">Inverted navbar</a></li>
</ul>
</li>
<li><a href="#breadcrumbs">Breadcrumbs</a></li>

44
components.html
View File

@ -1326,7 +1326,49 @@ body { padding-bottom: 70px; }
</div>
<h2>Inverted variation</h2>
<h2 id="navbar-scrollable">Scrollable responsive navbar</h2>
<p>For instances where you have too many items in your navbar to fight within the viewport of a small device, add <code>.nav-collapse-scrollable</code> to your navbar's <code>.nav-collapse</code> to set a <code>max-height</code> and smooth scrolling.</p>
<div class="bs-example">
<div class="navbar">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".bs-navbar-scroll-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</a>
<div class="collapse nav-collapse nav-collapse-scrollable bs-navbar-scroll-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<form class="navbar-form pull-left" action="">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</form>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
</div><!-- /example -->
{% highlight html %}
<div class="navbar">
<div class="container">
...
<div class="collapse nav-collapse nav-collapse-scrollable">
...
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
{% endhighlight %}
<h2 id="navbar-inverted">Inverted variation</h2>
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
<div class="bs-example">
<div class="navbar navbar-inverse">

10
dist/css/bootstrap.css vendored
View File

@ -2870,6 +2870,16 @@ button.close {
margin-bottom: 0;
}
@media (max-width: 768px) {
.nav-collapse-scrollable {
max-height: 360px;
margin-bottom: 15px;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}
.navbar-brand {
display: block;
max-width: 200px;

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

22
less/navbar.less
View File

@ -82,6 +82,8 @@
}
.navbar-fixed-top {
top: 0;
.nav-collapse {
}
}
.navbar-fixed-bottom {
bottom: 0;
@ -89,6 +91,26 @@
}
// Scrollable navbar navigation
//
// Sometimes you might have too many links in your fixed navbar and you need to
// maintain access to all that content. To help, add `.nav-collapse-scrollable`
// to your `.nav-collapse` to prevent the the content from flowing past the max-
// height of your browser.
//
// This is not automatically added to the `.navbar-fixed-top` because it causes
// z-index bugs in iOS7 (possibly earlier).
@media (max-width: @screen-small) {
.nav-collapse-scrollable {
margin-bottom: @navbar-padding-vertical;
max-height: 360px;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
}
//
// Navbar optional components