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 properities 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 orienation. 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;
165 .dropdown-menu-right {
167 left: auto; // Reset the default from `.dropdown-menu`
171 padding-right: .5rem;
176 // For nesting containers, have to redeclare for alignment purposes
183 display: flex !important; // stylelint-disable-line declaration-no-important
185 // Changes flex-bases to auto because of an IE10 bug
207 // Styles for switching between navbars with light or dark background.
209 // Dark links against a light background
212 color: $navbar-light-active-color;
214 @include hover-focus {
215 color: $navbar-light-active-color;
221 color: $navbar-light-color;
223 @include hover-focus {
224 color: $navbar-light-hover-color;
228 color: $navbar-light-disabled-color;
236 color: $navbar-light-active-color;
241 color: $navbar-light-color;
242 border-color: $navbar-light-toggler-border-color;
245 .navbar-toggler-icon {
246 background-image: $navbar-light-toggler-icon-bg;
250 color: $navbar-light-color;
252 color: $navbar-light-active-color;
254 @include hover-focus {
255 color: $navbar-light-active-color;
261 // White links against a dark background
264 color: $navbar-dark-active-color;
266 @include hover-focus {
267 color: $navbar-dark-active-color;
273 color: $navbar-dark-color;
275 @include hover-focus {
276 color: $navbar-dark-hover-color;
280 color: $navbar-dark-disabled-color;
288 color: $navbar-dark-active-color;
293 color: $navbar-dark-color;
294 border-color: $navbar-dark-toggler-border-color;
297 .navbar-toggler-icon {
298 background-image: $navbar-dark-toggler-icon-bg;
302 color: $navbar-dark-color;
304 color: $navbar-dark-active-color;
306 @include hover-focus {
307 color: $navbar-dark-active-color;