3 // --------------------------------------------------
6 // Wrapper and base class
8 // Provide a static navbar from which we expand to create full-width, fixed, and
9 // other navbar variations.
13 min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
14 margin-bottom: @navbar-margin-bottom;
15 border: 1px solid transparent;
17 // Prevent floats from breaking the navbar
18 &:extend(.clearfix all);
20 @media (min-width: @grid-float-breakpoint) {
21 border-radius: @navbar-border-radius;
28 // Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
29 // styling of responsive aspects.
32 &:extend(.clearfix all);
34 @media (min-width: @grid-float-breakpoint) {
40 // Navbar collapse (body)
42 // Group your navbar content into this for easy collapsing and expanding across
43 // various device sizes. By default, this content is collapsed when <768px, but
44 // will expand past that for a horizontal display.
46 // To start (on mobile devices) the navbar links, forms, and buttons are stacked
47 // vertically and include a `max-height` to overflow in case you have too much
48 // content for the user's viewport.
52 padding-right: @navbar-padding-horizontal;
53 padding-left: @navbar-padding-horizontal;
54 border-top: 1px solid transparent;
55 box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
56 &:extend(.clearfix all);
57 -webkit-overflow-scrolling: touch;
63 @media (min-width: @grid-float-breakpoint) {
69 display: block !important;
70 visibility: visible !important;
71 height: auto !important;
72 padding-bottom: 0; // Override default setting
73 overflow: visible !important;
80 // Undo the collapse side padding for navbars with containers to ensure
81 // alignment of right-aligned contents.
84 .navbar-fixed-bottom & {
92 .navbar-fixed-bottom {
94 max-height: @navbar-collapse-max-height;
96 @media (max-device-width: @screen-xs-min) and (orientation: landscape) {
103 // Both navbar header and collapse
105 // When a container is present, change the behavior of the header and collapse.
111 margin-right: -@navbar-padding-horizontal;
112 margin-left: -@navbar-padding-horizontal;
114 @media (min-width: @grid-float-breakpoint) {
123 // Navbar alignment options
125 // Display the navbar across the entirety of the page or fixed it to the top or
126 // bottom of the page.
128 // Static top (unfixed, but 100% wide) navbar
130 z-index: @zindex-navbar;
131 border-width: 0 0 1px;
133 @media (min-width: @grid-float-breakpoint) {
138 // Fix the top/bottom navbars when screen real estate supports it
140 .navbar-fixed-bottom {
144 z-index: @zindex-navbar-fixed;
146 // Undo the rounded corners
147 @media (min-width: @grid-float-breakpoint) {
153 border-width: 0 0 1px;
155 .navbar-fixed-bottom {
157 margin-bottom: 0; // override .navbar defaults
158 border-width: 1px 0 0;
162 // Brand/project name
166 padding: @navbar-padding-vertical @navbar-padding-horizontal;
167 font-size: @font-size-large;
168 line-height: @line-height-computed;
169 height: @navbar-height;
173 text-decoration: none;
180 @media (min-width: @grid-float-breakpoint) {
181 .navbar > .container &,
182 .navbar > .container-fluid & {
183 margin-left: -@navbar-padding-horizontal;
191 // Custom button for toggling the `.navbar-collapse`, powered by the collapse
192 // JavaScript plugin.
197 margin-right: @navbar-padding-horizontal;
199 .navbar-vertical-align(34px);
200 background-color: transparent;
201 background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
202 border: 1px solid transparent;
203 border-radius: @border-radius-base;
205 // We remove the `outline` here, but later compensate by attaching `:hover`
206 // styles to `:focus`.
218 .icon-bar + .icon-bar {
222 @media (min-width: @grid-float-breakpoint) {
230 // Builds on top of the `.nav` components with its own modifier class to make
231 // the nav the full height of the horizontal nav (above 768px).
234 margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
238 padding-bottom: 10px;
239 line-height: @line-height-computed;
242 @media (max-width: @grid-float-breakpoint-max) {
243 // Dropdowns get custom display when collapsed
244 .open .dropdown-menu {
249 background-color: transparent;
254 padding: 5px 15px 5px 25px;
257 line-height: @line-height-computed;
260 background-image: none;
266 // Uncollapse the nav
267 @media (min-width: @grid-float-breakpoint) {
274 padding-top: @navbar-padding-vertical;
275 padding-bottom: @navbar-padding-vertical;
284 // Extension of the `.form-inline` with some extra flavor for optimum display in
288 margin-left: -@navbar-padding-horizontal;
289 margin-right: -@navbar-padding-horizontal;
290 padding: 10px @navbar-padding-horizontal;
291 border-top: 1px solid transparent;
292 border-bottom: 1px solid transparent;
293 @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
294 .box-shadow(@shadow);
296 // Mixin behavior for optimum display
300 @media (max-width: @grid-float-breakpoint-max) {
309 // Vertically center in expanded, horizontal navbar
310 .navbar-vertical-align(@input-height-base);
312 // Undo 100% width for pull classes
313 @media (min-width: @grid-float-breakpoint) {
327 // Menu position and menu carets
328 .navbar-nav > li > .dropdown-menu {
330 .border-top-radius(0);
332 // Menu position and menu caret support for dropups via extra dropup class
333 .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
335 .border-top-radius(@navbar-border-radius);
336 .border-bottom-radius(0);
340 // Buttons in navbars
342 // Vertically center a button within a navbar (when *not* in a form).
345 .navbar-vertical-align(@input-height-base);
348 .navbar-vertical-align(@input-height-small);
351 .navbar-vertical-align(22);
358 // Add a class to make any element properly align itself vertically within the navbars.
361 .navbar-vertical-align(@line-height-computed);
363 @media (min-width: @grid-float-breakpoint) {
365 margin-left: @navbar-padding-horizontal;
366 margin-right: @navbar-padding-horizontal;
371 // Component alignment
373 // Repurpose the pull utilities as their own navbar utilities to avoid specificity
374 // issues with parents and chaining. Only do this when the navbar is uncollapsed
375 // though so that navbar contents properly stack and align in mobile.
377 // Declared after the navbar components to ensure more specificity on the margins.
379 @media (min-width: @grid-float-breakpoint) {
380 .navbar-left { .pull-left(); }
383 margin-right: -@navbar-padding-horizontal;
393 // --------------------------------------------------
397 background-color: @navbar-default-bg;
398 border-color: @navbar-default-border;
401 color: @navbar-default-brand-color;
404 color: @navbar-default-brand-hover-color;
405 background-color: @navbar-default-brand-hover-bg;
410 color: @navbar-default-color;
415 color: @navbar-default-link-color;
419 color: @navbar-default-link-hover-color;
420 background-color: @navbar-default-link-hover-bg;
427 color: @navbar-default-link-active-color;
428 background-color: @navbar-default-link-active-bg;
435 color: @navbar-default-link-disabled-color;
436 background-color: @navbar-default-link-disabled-bg;
442 border-color: @navbar-default-toggle-border-color;
445 background-color: @navbar-default-toggle-hover-bg;
448 background-color: @navbar-default-toggle-icon-bar-bg;
454 border-color: @navbar-default-border;
457 // Dropdown menu items
459 // Remove background color from open dropdown
464 background-color: @navbar-default-link-active-bg;
465 color: @navbar-default-link-active-color;
469 @media (max-width: @grid-float-breakpoint-max) {
470 // Dropdowns get custom display when collapsed
471 .open .dropdown-menu {
473 color: @navbar-default-link-color;
476 color: @navbar-default-link-hover-color;
477 background-color: @navbar-default-link-hover-bg;
484 color: @navbar-default-link-active-color;
485 background-color: @navbar-default-link-active-bg;
492 color: @navbar-default-link-disabled-color;
493 background-color: @navbar-default-link-disabled-bg;
503 // Add a class to ensure links outside the navbar nav are colored correctly.
506 color: @navbar-default-link-color;
508 color: @navbar-default-link-hover-color;
513 color: @navbar-default-link-color;
516 color: @navbar-default-link-hover-color;
519 fieldset[disabled] & {
522 color: @navbar-default-link-disabled-color;
531 background-color: @navbar-inverse-bg;
532 border-color: @navbar-inverse-border;
535 color: @navbar-inverse-brand-color;
538 color: @navbar-inverse-brand-hover-color;
539 background-color: @navbar-inverse-brand-hover-bg;
544 color: @navbar-inverse-color;
549 color: @navbar-inverse-link-color;
553 color: @navbar-inverse-link-hover-color;
554 background-color: @navbar-inverse-link-hover-bg;
561 color: @navbar-inverse-link-active-color;
562 background-color: @navbar-inverse-link-active-bg;
569 color: @navbar-inverse-link-disabled-color;
570 background-color: @navbar-inverse-link-disabled-bg;
575 // Darken the responsive nav toggle
577 border-color: @navbar-inverse-toggle-border-color;
580 background-color: @navbar-inverse-toggle-hover-bg;
583 background-color: @navbar-inverse-toggle-icon-bar-bg;
589 border-color: darken(@navbar-inverse-bg, 7%);
598 background-color: @navbar-inverse-link-active-bg;
599 color: @navbar-inverse-link-active-color;
603 @media (max-width: @grid-float-breakpoint-max) {
604 // Dropdowns get custom display
605 .open .dropdown-menu {
607 border-color: @navbar-inverse-border;
610 background-color: @navbar-inverse-border;
613 color: @navbar-inverse-link-color;
616 color: @navbar-inverse-link-hover-color;
617 background-color: @navbar-inverse-link-hover-bg;
624 color: @navbar-inverse-link-active-color;
625 background-color: @navbar-inverse-link-active-bg;
632 color: @navbar-inverse-link-disabled-color;
633 background-color: @navbar-inverse-link-disabled-bg;
641 color: @navbar-inverse-link-color;
643 color: @navbar-inverse-link-hover-color;
648 color: @navbar-inverse-link-color;
651 color: @navbar-inverse-link-hover-color;
654 fieldset[disabled] & {
657 color: @navbar-inverse-link-disabled-color;