$navbar-padding-y: 8px; $navbar-padding-x: 16px; $navbar-nav-link-padding-x: 8px; $navbar-brand-font-size: $font-size-lg; // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link $nav-link-height: calc(#{$font-size-base} * #{$line-height-base}) + #{$nav-link-padding-y} * 2; $navbar-brand-height: #{$navbar-brand-font-size} * #{$line-height-base}; $navbar-brand-padding-y: (calc(#{$nav-link-height} - #{$navbar-brand-height})) / 2; $navbar-toggler-padding-y: .25rem; $navbar-toggler-padding-x: .75rem; $navbar-toggler-font-size: $font-size-lg; $navbar-toggler-border-radius: $btn-border-radius; $navbar-dark-color: rgba($white, .5); $navbar-dark-hover-color: rgba($white, .75); $navbar-dark-active-color: $white; $navbar-dark-disabled-color: rgba($white, .25); $navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23"); $navbar-dark-toggler-border-color: rgba($white, .1); $navbar-light-color: rgba($black, .5); $navbar-light-hover-color: rgba($black, .7); $navbar-light-active-color: rgba($black, .9); $navbar-light-disabled-color: rgba($black, .3); $navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23"); $navbar-light-toggler-border-color: rgba($black, .1); $navbar-light-brand-color: $navbar-light-active-color; $navbar-light-brand-hover-color: $navbar-light-active-color; $navbar-dark-brand-color: $navbar-dark-active-color; $navbar-dark-brand-hover-color: $navbar-dark-active-color;