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.
33 justify-content: space-between;
40 // Used for brand, project, or site names.
43 display: inline-block;
44 padding-top: $navbar-brand-padding-y;
45 padding-bottom: $navbar-brand-padding-y;
46 margin-right: $navbar-padding-x;
47 font-size: $navbar-brand-font-size;
51 @include hover-focus {
52 text-decoration: none;
59 // Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
63 flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
85 display: inline-block;
86 padding-top: $nav-link-padding-y;
87 padding-bottom: $nav-link-padding-y;
93 // Custom styles for responsive collapsing and toggling of navbar contents.
94 // Powered by the collapse Bootstrap JavaScript plugin.
96 // When collapsed, prevent the toggleable navbar contents from appearing in
97 // the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
98 // on the `.navbar` parent.
102 // For always expanded or extra full navbars, ensure content aligns itself
103 // properly vertically. Can be easily overridden with flex utilities.
107 // Button for toggling the navbar when in its collapsed state
109 padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
110 font-size: $navbar-toggler-font-size;
112 background-color: transparent; // remove default button style
113 border: $border-width solid transparent; // remove default button style
114 @include border-radius($navbar-toggler-border-radius);
116 @include hover-focus {
117 text-decoration: none;
120 // Opinionated: add "hand" cursor to non-disabled .navbar-toggler elements
121 &:not(:disabled):not(.disabled) {
126 // Keep as a separate element so folks can easily override it with another icon
127 // or image file as needed.
128 .navbar-toggler-icon {
129 display: inline-block;
132 vertical-align: middle;
134 background: no-repeat center center;
135 background-size: 100% 100%;
138 // Generate series of `.navbar-expand-*` responsive classes for configuring
139 // where your navbar collapses.
141 @each $breakpoint in map-keys($grid-breakpoints) {
142 $next: breakpoint-next($breakpoint, $grid-breakpoints);
143 $infix: breakpoint-infix($next, $grid-breakpoints);
146 @include media-breakpoint-down($breakpoint) {
154 @include media-breakpoint-up($next) {
155 flex-flow: row nowrap;
156 justify-content: flex-start;
166 padding-right: $navbar-nav-link-padding-x;
167 padding-left: $navbar-nav-link-padding-x;
171 // For nesting containers, have to redeclare for alignment purposes
178 display: flex !important; // stylelint-disable-line declaration-no-important
180 // Changes flex-bases to auto because of an IE10 bug
195 // Styles for switching between navbars with light or dark background.
197 // Dark links against a light background
200 color: $navbar-light-brand-color;
202 @include hover-focus {
203 color: $navbar-light-brand-hover-color;
209 color: $navbar-light-color;
211 @include hover-focus {
212 color: $navbar-light-hover-color;
216 color: $navbar-light-disabled-color;
224 color: $navbar-light-active-color;
229 color: $navbar-light-color;
230 border-color: $navbar-light-toggler-border-color;
233 .navbar-toggler-icon {
234 background-image: $navbar-light-toggler-icon-bg;
238 color: $navbar-light-color;
240 color: $navbar-light-active-color;
242 @include hover-focus {
243 color: $navbar-light-active-color;
249 // White links against a dark background
252 color: $navbar-dark-brand-color;
254 @include hover-focus {
255 color: $navbar-dark-brand-hover-color;
261 color: $navbar-dark-color;
263 @include hover-focus {
264 color: $navbar-dark-hover-color;
268 color: $navbar-dark-disabled-color;
276 color: $navbar-dark-active-color;
281 color: $navbar-dark-color;
282 border-color: $navbar-dark-toggler-border-color;
285 .navbar-toggler-icon {
286 background-image: $navbar-dark-toggler-icon-bg;
290 color: $navbar-dark-color;
292 color: $navbar-dark-active-color;
294 @include hover-focus {
295 color: $navbar-dark-active-color;