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: 50% / 100% 100% no-repeat;
142 // Generate series of `.navbar-expand-*` responsive classes for configuring
143 // where your navbar collapses.
145 @each $breakpoint in map-keys($grid-breakpoints) {
146 $next: breakpoint-next($breakpoint, $grid-breakpoints);
147 $infix: breakpoint-infix($next, $grid-breakpoints);
150 @include media-breakpoint-down($breakpoint) {
151 %container-navbar-expand-#{$breakpoint} {
158 @extend %container-navbar-expand-#{$breakpoint};
161 @each $size, $container-max-width in $container-max-widths {
162 > .container#{breakpoint-infix($size, $container-max-widths)} {
163 @extend %container-navbar-expand-#{$breakpoint};
168 @include media-breakpoint-up($next) {
169 flex-flow: row nowrap;
170 justify-content: flex-start;
180 padding-right: $navbar-nav-link-padding-x;
181 padding-left: $navbar-nav-link-padding-x;
185 // For nesting containers, have to redeclare for alignment purposes
186 %container-nesting-#{$breakpoint} {
192 @extend %container-nesting-#{$breakpoint};
195 @each $size, $container-max-width in $container-max-widths {
196 > .container#{breakpoint-infix($size, $container-max-widths)} {
197 @extend %container-nesting-#{$breakpoint};
202 display: flex !important; // stylelint-disable-line declaration-no-important
204 // Changes flex-bases to auto because of an IE10 bug
219 // Styles for switching between navbars with light or dark background.
221 // Dark links against a light background
224 color: $navbar-light-brand-color;
226 @include hover-focus() {
227 color: $navbar-light-brand-hover-color;
233 color: $navbar-light-color;
235 @include hover-focus() {
236 color: $navbar-light-hover-color;
240 color: $navbar-light-disabled-color;
248 color: $navbar-light-active-color;
253 color: $navbar-light-color;
254 border-color: $navbar-light-toggler-border-color;
257 .navbar-toggler-icon {
258 background-image: escape-svg($navbar-light-toggler-icon-bg);
262 color: $navbar-light-color;
264 color: $navbar-light-active-color;
266 @include hover-focus() {
267 color: $navbar-light-active-color;
273 // White links against a dark background
276 color: $navbar-dark-brand-color;
278 @include hover-focus() {
279 color: $navbar-dark-brand-hover-color;
285 color: $navbar-dark-color;
287 @include hover-focus() {
288 color: $navbar-dark-hover-color;
292 color: $navbar-dark-disabled-color;
300 color: $navbar-dark-active-color;
305 color: $navbar-dark-color;
306 border-color: $navbar-dark-toggler-border-color;
309 .navbar-toggler-icon {
310 background-image: escape-svg($navbar-dark-toggler-icon-bg);
314 color: $navbar-dark-color;
316 color: $navbar-dark-active-color;
318 @include hover-focus() {
319 color: $navbar-dark-active-color;