.btn-navbar {
display: block;
}
- .nav-collapse.collapse {
+ .nav-collapse {
overflow: hidden;
height: 0;
}
- .nav-collapse.collapse.in {
- height: auto;
+}
+@media (min-width: 940px) {
+ .nav-collapse.collapse {
+ height: auto !important;
}
}
@media (min-width: 1200px) {
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
- <div class="nav-collapse collapse">
+ <div class="nav-collapse">
<ul class="nav">
<li class="">
<a href="./index.html">Overview</a>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
- <div class="nav-collapse collapse">
+ <div class="nav-collapse">
<ul class="nav">
<li class="">
<a href="./index.html">Overview</a>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
- <div class="nav-collapse collapse">
+ <div class="nav-collapse">
<ul class="nav">
<li class="">
<a href="./index.html">Overview</a>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
- <div class="nav-collapse collapse">
+ <div class="nav-collapse">
<ul class="nav">
<li class="">
<a href="./index.html">Overview</a>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
- <div class="nav-collapse collapse">
+ <div class="nav-collapse">
<ul class="nav">
<li class="active">
<a href="./index.html">Overview</a>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
- <div class="nav-collapse collapse">
+ <div class="nav-collapse">
<ul class="nav">
<li class="">
<a href="./index.html">Overview</a>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
- <div class="nav-collapse collapse">
+ <div class="nav-collapse">
<ul class="nav">
<li class="">
<a href="./index.html">Overview</a>
<tbody>
<tr>
<td class="span3"><code>@warningText</code></td>
- <td>#c09853</td>
- <td class="swatch-col"><span class="swatch" style="background-color: #c09853;"></span></td>
+ <td>#f3edd2</td>
+ <td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
</tr>
<tr>
<td><code>@warningBackground</code></td>
- <td>#f3edd2</td>
- <td><span class="swatch" style="background-color: #f3edd2;"></span></td>
+ <td>#c09853</td>
+ <td><span class="swatch" style="background-color: #c09853;"></span></td>
</tr>
<tr>
<td><code>@errorText</code></td>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
- <div class="nav-collapse collapse">
+ <div class="nav-collapse">
<ul class="nav">
<li class="">
<a href="./index.html">Overview</a>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
- <div class="nav-collapse collapse">
+ <div class="nav-collapse">
<ul class="nav">
<li class="{{index}}">
<a href="./index.html">{{_i}}Overview{{/i}}</a>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
- <div class="nav-collapse collapse">
+ <div class="nav-collapse">
<ul class="nav">
<li class="">
<a href="./index.html">Overview</a>
}
+
// UP TO LANDSCAPE PHONE
// ---------------------
}
+
// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
// --------------------------------------------------
@media (max-width: 768px) {
-
// GRID & CONTAINERS
// -----------------
// Remove width from containers
}
+
// PORTRAIT TABLET TO DEFAULT DESKTOP
// ----------------------------------
}
+
// TABLETS AND BELOW
// -----------------
@media (max-width: 940px) {
}
// Hide everything in the navbar save .brand and toggle button */
- .nav-collapse.collapse {
+ .nav-collapse {
overflow: hidden;
height: 0;
}
- .nav-collapse.collapse.in {
- height: auto;
- }
+}
+
+
+
+// DEFAULT DESKTOP
+// ---------------
+@media (min-width: 940px) {
+ .nav-collapse.collapse {
+ height: auto !important;
+ }
}
+
// LARGE DESKTOP & UP
// ------------------