diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 977401686a..5e777a3637 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -52,12 +52,10 @@ // Used for brand, project, or site names. .navbar-brand { - display: inline-block; padding-top: $navbar-brand-padding-y; padding-bottom: $navbar-brand-padding-y; - margin-right: $navbar-padding-x; + margin-right: $navbar-brand-margin-right; @include font-size($navbar-brand-font-size); - line-height: inherit; white-space: nowrap; &:hover, @@ -94,7 +92,6 @@ // .navbar-text { - display: inline-block; padding-top: $nav-link-padding-y; padding-bottom: $nav-link-padding-y; } @@ -109,8 +106,7 @@ // the default flexbox row orientation. Requires the use of `flex-wrap: wrap` // on the `.navbar` parent. .navbar-collapse { - flex-basis: 100%; - flex-grow: 1; + flex: 1 0 100%; // For always expanded or extra full navbars, ensure content aligns itself // properly vertically. Can be easily overridden with flex utilities. align-items: center; @@ -138,9 +134,9 @@ width: 1.5em; height: 1.5em; vertical-align: middle; - content: ""; - background: no-repeat center center; - background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center; + background-size: 100%; } // Generate series of `.navbar-expand-*` responsive classes for configuring diff --git a/scss/_variables.scss b/scss/_variables.scss index 2fa04f6ce5..c34e2d1700 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -843,6 +843,7 @@ $navbar-brand-font-size: $font-size-lg !default; $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default; $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; $navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default; +$navbar-brand-margin-right: 1rem !default; $navbar-toggler-padding-y: .25rem !default; $navbar-toggler-padding-x: .75rem !default;