A simple link to show your brand or project name only requires an anchor tag.
+<a class="brand" href="#">Project name</a>
Nav items are simple to add via unordered lists.
+<ul class="nav"> <li class="active"> @@ -1060,6 +1078,20 @@ </ul>
You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:
+
<ul class="nav">
...
@@ -1070,6 +1102,15 @@
Forms
To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include .navbar-form and either .pull-left or .pull-right to properly align it.
+
+
+
<form class="navbar-form pull-left">
<input type="text" class="span2">
@@ -1078,6 +1119,15 @@
Search form
For a more customized search form, add .navbar-search to the form and .search-query to the input for specialized styles in the navbar.
+
+
+
<form class="navbar-search pull-left">
<input type="text" class="search-query" placeholder="Search">
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 7c94999470..f0f19ee723 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -973,12 +973,30 @@
{{_i}}Brand{{/i}}
{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}
+
+
+ {{! /example }}
<a class="brand" href="#">{{_i}}Project name{{/i}}</a>
{{_i}}Nav links{{/i}}
{{_i}}Nav items are simple to add via unordered lists.{{/i}}
+
+
+ {{! /example }}
<ul class="nav">
<li class="active">
@@ -989,6 +1007,20 @@
</ul>
{{_i}}You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:{{/i}}
+
+
+ {{! /example }}
<ul class="nav">
...
@@ -999,6 +1031,15 @@
{{_i}}Forms{{/i}}
{{_i}}To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include .navbar-form and either .pull-left or .pull-right to properly align it.{{/i}}
+
+
+ {{! /example }}
<form class="navbar-form pull-left">
<input type="text" class="span2">
@@ -1007,6 +1048,15 @@
{{_i}}Search form{{/i}}
{{_i}}For a more customized search form, add .navbar-search to the form and .search-query to the input for specialized styles in the navbar.{{/i}}
+
+
+ {{! /example }}
<form class="navbar-search pull-left">
<input type="text" class="search-query" placeholder="{{_i}}Search{{/i}}">
diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less
index 7f01059ce5..d684fcafa1 100644
--- a/less/responsive-navbar.less
+++ b/less/responsive-navbar.less
@@ -5,7 +5,7 @@
// TABLETS AND BELOW
// -----------------
-@media (max-width: 979px) {
+@media (max-width: @navbarCollapseWidth) {
// UNFIX THE TOPBAR
// ----------------
diff --git a/less/variables.less b/less/variables.less
index 9c914d8741..7d627f9ee3 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -154,6 +154,8 @@
// Navbar
// -------------------------
+@navbarCollapseWidth: 979px;
+
@navbarHeight: 40px;
@navbarBackground: darken(@navbarBackgroundHighlight, 5%);
@navbarBackgroundHighlight: #ffffff;