15 // Provide a static navbar from which we expand to create full-width, fixed, and
16 // other navbar variations.
21 flex-wrap: wrap; // allow us to do the line break for collapsing content
23 justify-content: space-between; // space out brand from logo
24 padding: $navbar-padding-y $navbar-padding-x;
26 // Because flex properties aren't inherited, we need to redeclare these first
27 // few properties so that content nested within behave properly.
28 %container-flex-properties {
32 justify-content: space-between;
37 @extend %container-flex-properties;
40 @each $breakpoint, $container-max-width in $container-max-widths {
41 > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
42 @extend %container-flex-properties;
50 // Used for brand, project, or site names.
53 display: inline-block;
54 padding-top: $navbar-brand-padding-y;
55 padding-bottom: $navbar-brand-padding-y;
56 margin-right: $navbar-padding-x;
57 @include font-size($navbar-brand-font-size);
61 @include hover-focus() {
62 text-decoration: none;
69 // Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
73 flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
95 display: inline-block;
96 padding-top: $nav-link-padding-y;
97 padding-bottom: $nav-link-padding-y;
103 // Custom styles for responsive collapsing and toggling of navbar contents.
104 // Powered by the collapse Bootstrap JavaScript plugin.
106 // When collapsed, prevent the toggleable navbar contents from appearing in
107 // the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
108 // on the `.navbar` parent.
112 // For always expanded or extra full navbars, ensure content aligns itself
113 // properly vertically. Can be easily overridden with flex utilities.
117 // Button for toggling the navbar when in its collapsed state
119 padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
120 @include font-size($navbar-toggler-font-size);
122 background-color: transparent; // remove default button style
123 border: $border-width solid transparent; // remove default button style
124 @include border-radius($navbar-toggler-border-radius);
126 @include hover-focus() {
127 text-decoration: none;
131 // Keep as a separate element so folks can easily override it with another icon
132 // or image file as needed.
133 .navbar-toggler-icon {
134 display: inline-block;
137 vertical-align: middle;
139 background: no-repeat center center;
140 background-size: 100% 100%;
143 // Generate series of `.navbar-expand-*` responsive classes for configuring
144 // where your navbar collapses.
146 @each $breakpoint in map-keys($grid-breakpoints) {
147 $next: breakpoint-next($breakpoint, $grid-breakpoints);
148 $infix: breakpoint-infix($next, $grid-breakpoints);
151 @include media-breakpoint-down($breakpoint) {
152 %container-navbar-expand-#{$breakpoint} {
159 @extend %container-navbar-expand-#{$breakpoint};
162 @each $size, $container-max-width in $container-max-widths {
163 > .container#{breakpoint-infix($size, $container-max-widths)} {
164 @extend %container-navbar-expand-#{$breakpoint};
169 @include media-breakpoint-up($next) {
170 flex-flow: row nowrap;
171 justify-content: flex-start;
181 padding-right: $navbar-nav-link-padding-x;
182 padding-left: $navbar-nav-link-padding-x;
186 // For nesting containers, have to redeclare for alignment purposes
187 %container-nesting-#{$breakpoint} {
193 @extend %container-nesting-#{$breakpoint};
196 @each $size, $container-max-width in $container-max-widths {
197 > .container#{breakpoint-infix($size, $container-max-widths)} {
198 @extend %container-nesting-#{$breakpoint};
203 display: flex !important; // stylelint-disable-line declaration-no-important
205 // Changes flex-bases to auto because of an IE10 bug
220 // Styles for switching between navbars with light or dark background.
222 // Dark links against a light background
225 color: $navbar-light-brand-color;
227 @include hover-focus() {
228 color: $navbar-light-brand-hover-color;
234 color: $navbar-light-color;
236 @include hover-focus() {
237 color: $navbar-light-hover-color;
241 color: $navbar-light-disabled-color;
249 color: $navbar-light-active-color;
254 color: $navbar-light-color;
255 border-color: $navbar-light-toggler-border-color;
258 .navbar-toggler-icon {
259 background-image: escape-svg($navbar-light-toggler-icon-bg);
263 color: $navbar-light-color;
265 color: $navbar-light-active-color;
267 @include hover-focus() {
268 color: $navbar-light-active-color;
274 // White links against a dark background
277 color: $navbar-dark-brand-color;
279 @include hover-focus() {
280 color: $navbar-dark-brand-hover-color;
286 color: $navbar-dark-color;
288 @include hover-focus() {
289 color: $navbar-dark-hover-color;
293 color: $navbar-dark-disabled-color;
301 color: $navbar-dark-active-color;
306 color: $navbar-dark-color;
307 border-color: $navbar-dark-toggler-border-color;
310 .navbar-toggler-icon {
311 background-image: escape-svg($navbar-dark-toggler-icon-bg);
315 color: $navbar-dark-color;
317 color: $navbar-dark-active-color;
319 @include hover-focus() {
320 color: $navbar-dark-active-color;