diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index 097ce308a7..e26097da9d 100644
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -69,13 +69,14 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
-
{% endexample %}
### Nav
Navbar navigation is similar to our regular nav options—use the `.nav` base class with a modifier to achieve a particular look. In this case you'll want `.nav.navbar-nav`.
+Active states—with `.active`—to indicate the current page can be applied directly to `.nav-link`s or their immediate parent `.nav-item`s.
+
{% example html %}
{% endexample %}
+### Text
+
+Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text.
+
+{% example html %}
+
+{% endexample %}
+
+Using our utility classes, you can change the alignment and appearance of your navbar text.
+
+{% example html %}
+
+{% endexample %}
+
+Similarly, you can use utility classes to align navbar text to other navbar elements like the brand and navigation (which are automatically floated already).
+
+{% example html %}
+
+{% endexample %}
## Color schemes
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index cdc21e78ca..def526fdd1 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -99,6 +99,17 @@
}
+// Navbar text
+//
+//
+
+.navbar-text {
+ display: inline-block;
+ padding-top: .425rem;
+ padding-bottom: .425rem;
+}
+
+
// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
@@ -120,6 +131,31 @@
}
}
+// scss-lint:disable ImportantRule
+// Custom override for
+.navbar-toggleable {
+ &-xs {
+ @include clearfix;
+ @include media-breakpoint-up(sm) {
+ display: block !important;
+ }
+ }
+ &-sm {
+ @include clearfix;
+ @include media-breakpoint-up(md) {
+ display: block !important;
+ }
+ }
+ &-md {
+ @include clearfix;
+ @include media-breakpoint-up(lg) {
+ display: block !important;
+ }
+ }
+}
+// scss-lint:enable ImportantRule
+
+
// Navigation
//
// Custom navbar navigation built on the base `.nav` styles.
diff --git a/scss/_variables.scss b/scss/_variables.scss
index e8a18790b7..c6c757aa96 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -500,6 +500,8 @@ $navbar-brand-padding-y: .25rem !default;
$navbar-divider-padding-y: .425rem !default;
+$navbar-toggler-padding-x: .75rem !default;
+$navbar-toggler-padding-y: .5rem !default;
$navbar-toggler-font-size: $font-size-lg !default;
$navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-toggler-padding-x: .75rem !default;
@@ -511,10 +513,10 @@ $navbar-dark-active-color: rgba(255,255,255,1) !default;
$navbar-dark-disabled-color: rgba(255,255,255,.25) !default;
$navbar-dark-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default;
-$navbar-light-color: rgba(0,0,0,.3) !default;
-$navbar-light-hover-color: rgba(0,0,0,.6) !default;
-$navbar-light-active-color: rgba(0,0,0,.8) !default;
-$navbar-light-disabled-color: rgba(0,0,0,.15) !default;
+$navbar-light-color: rgba(0,0,0,.5) !default;
+$navbar-light-hover-color: rgba(0,0,0,.7) !default;
+$navbar-light-active-color: rgba(0,0,0,.9) !default;
+$navbar-light-disabled-color: rgba(0,0,0,.3) !default;
$navbar-light-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default;