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;