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.
51 max-height: @navbar-collapse-max-height;
53 padding-right: @navbar-padding-horizontal;
54 padding-left: @navbar-padding-horizontal;
55 border-top: 1px solid transparent;
56 box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
57 &:extend(.clearfix all);
58 -webkit-overflow-scrolling: touch;
64 @media (min-width: @grid-float-breakpoint) {
70 display: block !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 // Both navbar header and collapse
94 // When a container is present, change the behavior of the header and collapse.
100 margin-right: -@navbar-padding-horizontal;
101 margin-left: -@navbar-padding-horizontal;
103 @media (min-width: @grid-float-breakpoint) {
112 // Navbar alignment options
114 // Display the navbar across the entirety of the page or fixed it to the top or
115 // bottom of the page.
117 // Static top (unfixed, but 100% wide) navbar
119 z-index: @zindex-navbar;
120 border-width: 0 0 1px;
122 @media (min-width: @grid-float-breakpoint) {
127 // Fix the top/bottom navbars when screen real estate supports it
129 .navbar-fixed-bottom {
133 z-index: @zindex-navbar-fixed;
135 // Undo the rounded corners
136 @media (min-width: @grid-float-breakpoint) {
142 border-width: 0 0 1px;
144 .navbar-fixed-bottom {
146 margin-bottom: 0; // override .navbar defaults
147 border-width: 1px 0 0;
151 // Brand/project name
155 padding: @navbar-padding-vertical @navbar-padding-horizontal;
156 font-size: @font-size-large;
157 line-height: @line-height-computed;
158 height: @navbar-height;
162 text-decoration: none;
165 @media (min-width: @grid-float-breakpoint) {
166 .navbar > .container &,
167 .navbar > .container-fluid & {
168 margin-left: -@navbar-padding-horizontal;
176 // Custom button for toggling the `.navbar-collapse`, powered by the collapse
177 // JavaScript plugin.
182 margin-right: @navbar-padding-horizontal;
184 .navbar-vertical-align(34px);
185 background-color: transparent;
186 background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
187 border: 1px solid transparent;
188 border-radius: @border-radius-base;
190 // We remove the `outline` here, but later compensate by attaching `:hover`
191 // styles to `:focus`.
203 .icon-bar + .icon-bar {
207 @media (min-width: @grid-float-breakpoint) {
215 // Builds on top of the `.nav` components with its own modifier class to make
216 // the nav the full height of the horizontal nav (above 768px).
219 margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
223 padding-bottom: 10px;
224 line-height: @line-height-computed;
227 @media (max-width: @grid-float-breakpoint-max) {
228 // Dropdowns get custom display when collapsed
229 .open .dropdown-menu {
234 background-color: transparent;
239 padding: 5px 15px 5px 25px;
242 line-height: @line-height-computed;
245 background-image: none;
251 // Uncollapse the nav
252 @media (min-width: @grid-float-breakpoint) {
259 padding-top: @navbar-padding-vertical;
260 padding-bottom: @navbar-padding-vertical;
264 &.navbar-right:last-child {
265 margin-right: -@navbar-padding-horizontal;
271 // Component alignment
273 // Repurpose the pull utilities as their own navbar utilities to avoid specificity
274 // issues with parents and chaining. Only do this when the navbar is uncollapsed
275 // though so that navbar contents properly stack and align in mobile.
277 @media (min-width: @grid-float-breakpoint) {
278 .navbar-left { .pull-left(); }
279 .navbar-right { .pull-right(); }
285 // Extension of the `.form-inline` with some extra flavor for optimum display in
289 margin-left: -@navbar-padding-horizontal;
290 margin-right: -@navbar-padding-horizontal;
291 padding: 10px @navbar-padding-horizontal;
292 border-top: 1px solid transparent;
293 border-bottom: 1px solid transparent;
294 @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
295 .box-shadow(@shadow);
297 // Mixin behavior for optimum display
301 @media (max-width: @grid-float-breakpoint-max) {
306 // Vertically center in expanded, horizontal navbar
307 .navbar-vertical-align(@input-height-base);
309 // Undo 100% width for pull classes
310 @media (min-width: @grid-float-breakpoint) {
319 // Outdent the form if last child to line up with content down the page
320 &.navbar-right:last-child {
321 margin-right: -@navbar-padding-horizontal;
329 // Menu position and menu carets
330 .navbar-nav > li > .dropdown-menu {
332 .border-top-radius(0);
334 // Menu position and menu caret support for dropups via extra dropup class
335 .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
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;
368 // Outdent the form if last child to line up with content down the page
369 &.navbar-right:last-child {
376 // --------------------------------------------------
380 background-color: @navbar-default-bg;
381 border-color: @navbar-default-border;
384 color: @navbar-default-brand-color;
387 color: @navbar-default-brand-hover-color;
388 background-color: @navbar-default-brand-hover-bg;
393 color: @navbar-default-color;
398 color: @navbar-default-link-color;
402 color: @navbar-default-link-hover-color;
403 background-color: @navbar-default-link-hover-bg;
410 color: @navbar-default-link-active-color;
411 background-color: @navbar-default-link-active-bg;
418 color: @navbar-default-link-disabled-color;
419 background-color: @navbar-default-link-disabled-bg;
425 border-color: @navbar-default-toggle-border-color;
428 background-color: @navbar-default-toggle-hover-bg;
431 background-color: @navbar-default-toggle-icon-bar-bg;
437 border-color: @navbar-default-border;
440 // Dropdown menu items
442 // Remove background color from open dropdown
447 background-color: @navbar-default-link-active-bg;
448 color: @navbar-default-link-active-color;
452 @media (max-width: @grid-float-breakpoint-max) {
453 // Dropdowns get custom display when collapsed
454 .open .dropdown-menu {
456 color: @navbar-default-link-color;
459 color: @navbar-default-link-hover-color;
460 background-color: @navbar-default-link-hover-bg;
467 color: @navbar-default-link-active-color;
468 background-color: @navbar-default-link-active-bg;
475 color: @navbar-default-link-disabled-color;
476 background-color: @navbar-default-link-disabled-bg;
486 // Add a class to ensure links outside the navbar nav are colored correctly.
489 color: @navbar-default-link-color;
491 color: @navbar-default-link-hover-color;
500 background-color: @navbar-inverse-bg;
501 border-color: @navbar-inverse-border;
504 color: @navbar-inverse-brand-color;
507 color: @navbar-inverse-brand-hover-color;
508 background-color: @navbar-inverse-brand-hover-bg;
513 color: @navbar-inverse-color;
518 color: @navbar-inverse-link-color;
522 color: @navbar-inverse-link-hover-color;
523 background-color: @navbar-inverse-link-hover-bg;
530 color: @navbar-inverse-link-active-color;
531 background-color: @navbar-inverse-link-active-bg;
538 color: @navbar-inverse-link-disabled-color;
539 background-color: @navbar-inverse-link-disabled-bg;
544 // Darken the responsive nav toggle
546 border-color: @navbar-inverse-toggle-border-color;
549 background-color: @navbar-inverse-toggle-hover-bg;
552 background-color: @navbar-inverse-toggle-icon-bar-bg;
558 border-color: darken(@navbar-inverse-bg, 7%);
567 background-color: @navbar-inverse-link-active-bg;
568 color: @navbar-inverse-link-active-color;
572 @media (max-width: @grid-float-breakpoint-max) {
573 // Dropdowns get custom display
574 .open .dropdown-menu {
576 border-color: @navbar-inverse-border;
579 background-color: @navbar-inverse-border;
582 color: @navbar-inverse-link-color;
585 color: @navbar-inverse-link-hover-color;
586 background-color: @navbar-inverse-link-hover-bg;
593 color: @navbar-inverse-link-active-color;
594 background-color: @navbar-inverse-link-active-bg;
601 color: @navbar-inverse-link-disabled-color;
602 background-color: @navbar-inverse-link-disabled-bg;
610 color: @navbar-inverse-link-color;
612 color: @navbar-inverse-link-hover-color;