3 // --------------------------------------------------
5 // Wrapper and base class
7 // Provide a static navbar from which we expand to create full-width, fixed, and
8 // other navbar variations.
12 min-height: $navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
13 margin-bottom: $navbar-margin-bottom;
14 border: 1px solid transparent;
16 // Prevent floats from breaking the navbar
19 @media (min-width: $grid-float-breakpoint) {
20 border-radius: $navbar-border-radius;
26 // Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
27 // styling of responsive aspects.
32 @media (min-width: $grid-float-breakpoint) {
37 // Navbar collapse (body)
39 // Group your navbar content into this for easy collapsing and expanding across
40 // various device sizes. By default, this content is collapsed when <768px, but
41 // will expand past that for a horizontal display.
43 // To start (on mobile devices) the navbar links, forms, and buttons are stacked
44 // vertically and include a `max-height` to overflow in case you have too much
45 // content for the user's viewport.
49 padding-right: $navbar-padding-horizontal;
50 padding-left: $navbar-padding-horizontal;
51 border-top: 1px solid transparent;
52 box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
54 -webkit-overflow-scrolling: touch;
60 @media (min-width: $grid-float-breakpoint) {
66 display: block !important;
67 height: auto !important;
68 padding-bottom: 0; // Override default setting
69 overflow: visible !important;
76 // Undo the collapse side padding for navbars with containers to ensure
77 // alignment of right-aligned contents.
80 .navbar-fixed-bottom & {
88 .navbar-fixed-bottom {
90 max-height: $navbar-collapse-max-height;
92 @media (max-device-width: $screen-xs-min) and (orientation: landscape) {
98 // Both navbar header and collapse
100 // When a container is present, change the behavior of the header and collapse.
106 margin-right: -$navbar-padding-horizontal;
107 margin-left: -$navbar-padding-horizontal;
109 @media (min-width: $grid-float-breakpoint) {
117 // Navbar alignment options
119 // Display the navbar across the entirety of the page or fixed it to the top or
120 // bottom of the page.
122 // Static top (unfixed, but 100% wide) navbar
124 z-index: $zindex-navbar;
125 border-width: 0 0 1px;
127 @media (min-width: $grid-float-breakpoint) {
132 // Fix the top/bottom navbars when screen real estate supports it
134 .navbar-fixed-bottom {
138 z-index: $zindex-navbar-fixed;
140 // Undo the rounded corners
141 @media (min-width: $grid-float-breakpoint) {
148 border-width: 0 0 1px;
151 .navbar-fixed-bottom {
153 margin-bottom: 0; // override .navbar defaults
154 border-width: 1px 0 0;
157 // Brand/project name
161 padding: $navbar-padding-vertical $navbar-padding-horizontal;
162 font-size: $font-size-large;
163 line-height: $line-height-computed;
164 height: $navbar-height;
168 text-decoration: none;
175 @media (min-width: $grid-float-breakpoint) {
176 .navbar > .container &,
177 .navbar > .container-fluid & {
178 margin-left: -$navbar-padding-horizontal;
185 // Custom button for toggling the `.navbar-collapse`, powered by the collapse
186 // JavaScript plugin.
191 margin-right: $navbar-padding-horizontal;
193 @include navbar-vertical-align(34px);
194 background-color: transparent;
195 background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
196 border: 1px solid transparent;
197 border-radius: $border-radius-base;
199 // We remove the `outline` here, but later compensate by attaching `:hover`
200 // styles to `:focus`.
212 .icon-bar + .icon-bar {
216 @media (min-width: $grid-float-breakpoint) {
223 // Builds on top of the `.nav` components with its own modifier class to make
224 // the nav the full height of the horizontal nav (above 768px).
227 margin: ($navbar-padding-vertical / 2) (-$navbar-padding-horizontal);
231 padding-bottom: 10px;
232 line-height: $line-height-computed;
235 @media (max-width: $grid-float-breakpoint-max) {
236 // Dropdowns get custom display when collapsed
237 .open .dropdown-menu {
242 background-color: transparent;
247 padding: 5px 15px 5px 25px;
250 line-height: $line-height-computed;
253 background-image: none;
259 // Uncollapse the nav
260 @media (min-width: $grid-float-breakpoint) {
267 padding-top: $navbar-padding-vertical;
268 padding-bottom: $navbar-padding-vertical;
276 // Extension of the `.form-inline` with some extra flavor for optimum display in
280 margin-left: -$navbar-padding-horizontal;
281 margin-right: -$navbar-padding-horizontal;
282 padding: 10px $navbar-padding-horizontal;
283 border-top: 1px solid transparent;
284 border-bottom: 1px solid transparent;
285 $shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
286 @include box-shadow($shadow);
288 // Mixin behavior for optimum display
289 @include form-inline;
292 @media (max-width: $grid-float-breakpoint-max) {
301 // Vertically center in expanded, horizontal navbar
302 @include navbar-vertical-align($input-height-base);
304 // Undo 100% width for pull classes
305 @media (min-width: $grid-float-breakpoint) {
312 @include box-shadow(none);
318 // Menu position and menu carets
319 .navbar-nav > li > .dropdown-menu {
321 @include border-top-radius(0);
324 // Menu position and menu caret support for dropups via extra dropup class
325 .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
327 @include border-top-radius($navbar-border-radius);
328 @include border-bottom-radius(0);
331 // Buttons in navbars
333 // Vertically center a button within a navbar (when *not* in a form).
336 @include navbar-vertical-align($input-height-base);
339 @include navbar-vertical-align($input-height-small);
342 @include navbar-vertical-align(22);
348 // Add a class to make any element properly align itself vertically within the navbars.
351 @include navbar-vertical-align($line-height-computed);
353 @media (min-width: $grid-float-breakpoint) {
355 margin-left: $navbar-padding-horizontal;
356 margin-right: $navbar-padding-horizontal;
360 // Component alignment
362 // Repurpose the pull utilities as their own navbar utilities to avoid specificity
363 // issues with parents and chaining. Only do this when the navbar is uncollapsed
364 // though so that navbar contents properly stack and align in mobile.
366 // Declared after the navbar components to ensure more specificity on the margins.
368 @media (min-width: $grid-float-breakpoint) {
370 float: left !important;
373 float: right !important;
374 margin-right: -$navbar-padding-horizontal;
383 // --------------------------------------------------
387 background-color: $navbar-default-bg;
388 border-color: $navbar-default-border;
391 color: $navbar-default-brand-color;
394 color: $navbar-default-brand-hover-color;
395 background-color: $navbar-default-brand-hover-bg;
400 color: $navbar-default-color;
405 color: $navbar-default-link-color;
409 color: $navbar-default-link-hover-color;
410 background-color: $navbar-default-link-hover-bg;
417 color: $navbar-default-link-active-color;
418 background-color: $navbar-default-link-active-bg;
425 color: $navbar-default-link-disabled-color;
426 background-color: $navbar-default-link-disabled-bg;
432 border-color: $navbar-default-toggle-border-color;
435 background-color: $navbar-default-toggle-hover-bg;
438 background-color: $navbar-default-toggle-icon-bar-bg;
444 border-color: $navbar-default-border;
447 // Dropdown menu items
449 // Remove background color from open dropdown
454 background-color: $navbar-default-link-active-bg;
455 color: $navbar-default-link-active-color;
459 @media (max-width: $grid-float-breakpoint-max) {
460 // Dropdowns get custom display when collapsed
461 .open .dropdown-menu {
463 color: $navbar-default-link-color;
466 color: $navbar-default-link-hover-color;
467 background-color: $navbar-default-link-hover-bg;
474 color: $navbar-default-link-active-color;
475 background-color: $navbar-default-link-active-bg;
482 color: $navbar-default-link-disabled-color;
483 background-color: $navbar-default-link-disabled-bg;
492 // Add a class to ensure links outside the navbar nav are colored correctly.
495 color: $navbar-default-link-color;
497 color: $navbar-default-link-hover-color;
502 color: $navbar-default-link-color;
505 color: $navbar-default-link-hover-color;
508 fieldset[disabled] & {
511 color: $navbar-default-link-disabled-color;
520 background-color: $navbar-inverse-bg;
521 border-color: $navbar-inverse-border;
524 color: $navbar-inverse-brand-color;
527 color: $navbar-inverse-brand-hover-color;
528 background-color: $navbar-inverse-brand-hover-bg;
533 color: $navbar-inverse-color;
538 color: $navbar-inverse-link-color;
542 color: $navbar-inverse-link-hover-color;
543 background-color: $navbar-inverse-link-hover-bg;
550 color: $navbar-inverse-link-active-color;
551 background-color: $navbar-inverse-link-active-bg;
558 color: $navbar-inverse-link-disabled-color;
559 background-color: $navbar-inverse-link-disabled-bg;
564 // Darken the responsive nav toggle
566 border-color: $navbar-inverse-toggle-border-color;
569 background-color: $navbar-inverse-toggle-hover-bg;
572 background-color: $navbar-inverse-toggle-icon-bar-bg;
578 border-color: darken($navbar-inverse-bg, 7%);
587 background-color: $navbar-inverse-link-active-bg;
588 color: $navbar-inverse-link-active-color;
592 @media (max-width: $grid-float-breakpoint-max) {
593 // Dropdowns get custom display
594 .open .dropdown-menu {
596 border-color: $navbar-inverse-border;
599 background-color: $navbar-inverse-border;
602 color: $navbar-inverse-link-color;
605 color: $navbar-inverse-link-hover-color;
606 background-color: $navbar-inverse-link-hover-bg;
613 color: $navbar-inverse-link-active-color;
614 background-color: $navbar-inverse-link-active-bg;
621 color: $navbar-inverse-link-disabled-color;
622 background-color: $navbar-inverse-link-disabled-bg;
630 color: $navbar-inverse-link-color;
632 color: $navbar-inverse-link-hover-color;
637 color: $navbar-inverse-link-color;
640 color: $navbar-inverse-link-hover-color;
643 fieldset[disabled] & {
646 color: $navbar-inverse-link-disabled-color;