15 // Provide a static navbar from which we expand to create full-width, fixed, and
16 // other navbar variations.
21 flex-direction: column;
22 padding: $navbar-padding-y $navbar-padding-x;
28 // Used for brand, project, or site names.
31 display: inline-block;
33 padding-bottom: .25rem;
34 margin-right: $navbar-padding-x;
35 font-size: $font-size-lg;
39 @include hover-focus {
40 text-decoration: none;
47 // Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
51 flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
68 display: inline-block;
70 padding-bottom: .425rem;
76 // Custom styles for responsive collapsing and toggling of navbar contents.
77 // Powered by the collapse Bootstrap JavaScript plugin.
79 // Button for toggling the navbar when in its collapsed state
81 align-self: flex-start; // Prevent toggler from growing to full width when it's the only visible navbar child
82 padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
83 font-size: $navbar-toggler-font-size;
85 background: transparent; // remove default button style
86 border: $border-width solid transparent; // remove default button style
87 @include border-radius($navbar-toggler-border-radius);
89 @include hover-focus {
90 text-decoration: none;
94 // Keep as a separate element so folks can easily override it with another icon
95 // or image file as needed.
96 .navbar-toggler-icon {
97 display: inline-block;
100 vertical-align: middle;
102 background: no-repeat center center;
103 background-size: 100% 100%;
106 // Use `position` on the toggler to prevent it from being auto placed as a flex
107 // item and allow easy placement.
108 .navbar-toggler-left {
110 left: $navbar-padding-x;
112 .navbar-toggler-right {
114 right: $navbar-padding-x;
117 // Generate series of `.navbar-toggleable-*` responsive classes for configuring
118 // where your navbar collapses.
120 @each $breakpoint in map-keys($grid-breakpoints) {
121 $next: breakpoint-next($breakpoint, $grid-breakpoints);
122 $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
125 @include media-breakpoint-down($breakpoint) {
139 @include media-breakpoint-up($next) {
148 padding-right: .5rem;
153 // For nesting containers, have to redeclare for alignment purposes
160 // scss-lint:disable ImportantRule
162 display: flex !important;
165 // scss-lint:enable ImportantRule
178 // Styles for switching between navbars with light or dark background.
180 // Dark links against a light background
184 color: $navbar-light-active-color;
186 @include hover-focus {
187 color: $navbar-light-active-color;
193 color: $navbar-light-color;
195 @include hover-focus {
196 color: $navbar-light-hover-color;
200 color: $navbar-light-disabled-color;
208 color: $navbar-light-active-color;
213 border-color: $navbar-light-toggler-border;
216 .navbar-toggler-icon {
217 background-image: $navbar-light-toggler-bg;
221 color: $navbar-light-color;
225 // White links against a dark background
229 color: $navbar-inverse-active-color;
231 @include hover-focus {
232 color: $navbar-inverse-active-color;
238 color: $navbar-inverse-color;
240 @include hover-focus {
241 color: $navbar-inverse-hover-color;
245 color: $navbar-inverse-disabled-color;
253 color: $navbar-inverse-active-color;
258 border-color: $navbar-inverse-toggler-border;
261 .navbar-toggler-icon {
262 background-image: $navbar-inverse-toggler-bg;
266 color: $navbar-inverse-color;