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;
161 text-decoration: none;
164 // Prevent Glyphicons from increasing height of navbar
171 @media (min-width: @grid-float-breakpoint) {
172 .navbar > .container &,
173 .navbar > .container-fluid & {
174 margin-left: -@navbar-padding-horizontal;
182 // Custom button for toggling the `.navbar-collapse`, powered by the collapse
183 // JavaScript plugin.
188 margin-right: @navbar-padding-horizontal;
190 .navbar-vertical-align(34px);
191 background-color: transparent;
192 background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
193 border: 1px solid transparent;
194 border-radius: @border-radius-base;
196 // We remove the `outline` here, but later compensate by attaching `:hover`
197 // styles to `:focus`.
209 .icon-bar + .icon-bar {
213 @media (min-width: @grid-float-breakpoint) {
221 // Builds on top of the `.nav` components with its own modifier class to make
222 // the nav the full height of the horizontal nav (above 768px).
225 margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
229 padding-bottom: 10px;
230 line-height: @line-height-computed;
233 @media (max-width: @grid-float-breakpoint-max) {
234 // Dropdowns get custom display when collapsed
235 .open .dropdown-menu {
240 background-color: transparent;
245 padding: 5px 15px 5px 25px;
248 line-height: @line-height-computed;
251 background-image: none;
257 // Uncollapse the nav
258 @media (min-width: @grid-float-breakpoint) {
265 padding-top: @navbar-padding-vertical;
266 padding-bottom: @navbar-padding-vertical;
270 &.navbar-right:last-child {
271 margin-right: -@navbar-padding-horizontal;
277 // Component alignment
279 // Repurpose the pull utilities as their own navbar utilities to avoid specificity
280 // issues with parents and chaining. Only do this when the navbar is uncollapsed
281 // though so that navbar contents properly stack and align in mobile.
283 @media (min-width: @grid-float-breakpoint) {
284 .navbar-left { .pull-left(); }
285 .navbar-right { .pull-right(); }
291 // Extension of the `.form-inline` with some extra flavor for optimum display in
295 margin-left: -@navbar-padding-horizontal;
296 margin-right: -@navbar-padding-horizontal;
297 padding: 10px @navbar-padding-horizontal;
298 border-top: 1px solid transparent;
299 border-bottom: 1px solid transparent;
300 @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
301 .box-shadow(@shadow);
303 // Mixin behavior for optimum display
307 @media (max-width: @grid-float-breakpoint-max) {
312 // Vertically center in expanded, horizontal navbar
313 .navbar-vertical-align(@input-height-base);
315 // Undo 100% width for pull classes
316 @media (min-width: @grid-float-breakpoint) {
325 // Outdent the form if last child to line up with content down the page
326 &.navbar-right:last-child {
327 margin-right: -@navbar-padding-horizontal;
335 // Menu position and menu carets
336 .navbar-nav > li > .dropdown-menu {
338 .border-top-radius(0);
340 // Menu position and menu caret support for dropups via extra dropup class
341 .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
342 .border-bottom-radius(0);
346 // Buttons in navbars
348 // Vertically center a button within a navbar (when *not* in a form).
351 .navbar-vertical-align(@input-height-base);
354 .navbar-vertical-align(@input-height-small);
357 .navbar-vertical-align(22);
364 // Add a class to make any element properly align itself vertically within the navbars.
367 .navbar-vertical-align(@line-height-computed);
369 @media (min-width: @grid-float-breakpoint) {
371 margin-left: @navbar-padding-horizontal;
372 margin-right: @navbar-padding-horizontal;
374 // Outdent the form if last child to line up with content down the page
375 &.navbar-right:last-child {
382 // --------------------------------------------------
386 background-color: @navbar-default-bg;
387 border-color: @navbar-default-border;
390 color: @navbar-default-brand-color;
393 color: @navbar-default-brand-hover-color;
394 background-color: @navbar-default-brand-hover-bg;
399 color: @navbar-default-color;
404 color: @navbar-default-link-color;
408 color: @navbar-default-link-hover-color;
409 background-color: @navbar-default-link-hover-bg;
416 color: @navbar-default-link-active-color;
417 background-color: @navbar-default-link-active-bg;
424 color: @navbar-default-link-disabled-color;
425 background-color: @navbar-default-link-disabled-bg;
431 border-color: @navbar-default-toggle-border-color;
434 background-color: @navbar-default-toggle-hover-bg;
437 background-color: @navbar-default-toggle-icon-bar-bg;
443 border-color: @navbar-default-border;
446 // Dropdown menu items
448 // Remove background color from open dropdown
453 background-color: @navbar-default-link-active-bg;
454 color: @navbar-default-link-active-color;
458 @media (max-width: @grid-float-breakpoint-max) {
459 // Dropdowns get custom display when collapsed
460 .open .dropdown-menu {
462 color: @navbar-default-link-color;
465 color: @navbar-default-link-hover-color;
466 background-color: @navbar-default-link-hover-bg;
473 color: @navbar-default-link-active-color;
474 background-color: @navbar-default-link-active-bg;
481 color: @navbar-default-link-disabled-color;
482 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;
506 background-color: @navbar-inverse-bg;
507 border-color: @navbar-inverse-border;
510 color: @navbar-inverse-brand-color;
513 color: @navbar-inverse-brand-hover-color;
514 background-color: @navbar-inverse-brand-hover-bg;
519 color: @navbar-inverse-color;
524 color: @navbar-inverse-link-color;
528 color: @navbar-inverse-link-hover-color;
529 background-color: @navbar-inverse-link-hover-bg;
536 color: @navbar-inverse-link-active-color;
537 background-color: @navbar-inverse-link-active-bg;
544 color: @navbar-inverse-link-disabled-color;
545 background-color: @navbar-inverse-link-disabled-bg;
550 // Darken the responsive nav toggle
552 border-color: @navbar-inverse-toggle-border-color;
555 background-color: @navbar-inverse-toggle-hover-bg;
558 background-color: @navbar-inverse-toggle-icon-bar-bg;
564 border-color: darken(@navbar-inverse-bg, 7%);
573 background-color: @navbar-inverse-link-active-bg;
574 color: @navbar-inverse-link-active-color;
578 @media (max-width: @grid-float-breakpoint-max) {
579 // Dropdowns get custom display
580 .open .dropdown-menu {
582 border-color: @navbar-inverse-border;
585 background-color: @navbar-inverse-border;
588 color: @navbar-inverse-link-color;
591 color: @navbar-inverse-link-hover-color;
592 background-color: @navbar-inverse-link-hover-bg;
599 color: @navbar-inverse-link-active-color;
600 background-color: @navbar-inverse-link-active-bg;
607 color: @navbar-inverse-link-disabled-color;
608 background-color: @navbar-inverse-link-disabled-bg;
616 color: @navbar-inverse-link-color;
618 color: @navbar-inverse-link-hover-color;