3 // --------------------------------------------------
5 // Wrapper and base class
8 min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
10 padding-left: @navbar-padding-horizontal;
11 padding-right: @navbar-padding-horizontal;
12 background-color: @navbar-bg;
13 border-radius: @border-radius-base;
15 // Prevent floats from breaking the navbar
20 // -------------------------
23 // Space out from .navbar .brand and .btn-navbar when stacked in mobile views
28 padding-top: ((@navbar-height - @line-height-computed) / 2);
29 padding-bottom: ((@navbar-height - @line-height-computed) / 2);
30 color: @navbar-link-color;
32 border-radius: @border-radius-base;
35 color: @navbar-link-hover-color;
36 background-color: @navbar-link-hover-bg;
43 color: @navbar-link-active-color;
44 background-color: @navbar-link-active-bg;
51 color: @navbar-link-disabled-color;
52 background-color: @navbar-link-disabled-bg;
56 // Right aligned contents
57 // Make them full width first so that they align properly on mobile
66 // Navbar alignment options
67 // --------------------------------------------------
74 // Fix the top/bottom navbars when screen real estate supports it
76 .navbar-fixed-bottom {
80 z-index: @zindex-navbar-fixed;
86 .navbar-fixed-bottom {
88 margin-bottom: 0; // override .navbar defaults
94 // Navbar optional components
95 // --------------------------------------------------
103 padding: @navbar-padding-vertical @navbar-padding-horizontal;
104 font-size: @font-size-large;
106 line-height: @line-height-computed;
107 color: @navbar-brand-color;
111 color: @navbar-brand-hover-color;
112 text-decoration: none;
113 background-color: @navbar-brand-hover-bg;
117 // Collapsible navbar toggle
120 top: floor((@navbar-height - 32) / 2);
125 background-color: transparent;
126 border: 1px solid @navbar-toggle-border-color;
127 border-radius: @border-radius-base;
131 background-color: @navbar-toggle-hover-bg;
139 background-color: @navbar-toggle-icon-bar-bg;
142 .icon-bar + .icon-bar {
150 .navbar-vertical-align(@input-height-base); // Vertically center in navbar
155 // Menu position and menu carets
156 .navbar-nav > li > .dropdown-menu {
158 border-top-left-radius: 0;
159 border-top-right-radius: 0;
161 // Menu position and menu caret support for dropups via extra dropup class
162 .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
163 border-bottom-left-radius: 0;
164 border-bottom-right-radius: 0;
167 // Dropdown menu items and carets
169 // Caret should match text color on hover
170 > .dropdown > a:hover .caret,
171 > .dropdown > a:focus .caret {
172 border-top-color: @navbar-link-hover-color;
173 border-bottom-color: @navbar-link-hover-color;
176 // Remove background color from open dropdown
181 background-color: @navbar-link-active-bg;
182 color: @navbar-link-active-color;
184 border-top-color: @navbar-link-active-color;
185 border-bottom-color: @navbar-link-active-color;
189 > .dropdown > a .caret {
190 border-top-color: @navbar-link-color;
191 border-bottom-color: @navbar-link-color;
195 // Right aligned menus need alt position
196 .navbar-nav.pull-right > li > .dropdown-menu,
197 .navbar-nav > li > .dropdown-menu.pull-right {
205 // --------------------------------------------------
208 background-color: @navbar-inverse-bg;
211 color: @navbar-inverse-brand-color;
214 color: @navbar-inverse-brand-hover-color;
215 background-color: @navbar-inverse-brand-hover-bg;
220 color: @navbar-inverse-color;
225 color: @navbar-inverse-link-color;
229 color: @navbar-inverse-link-hover-color;
230 background-color: @navbar-inverse-link-hover-bg;
237 color: @navbar-inverse-link-active-color;
238 background-color: @navbar-inverse-link-active-bg;
245 color: @navbar-inverse-link-disabled-color;
246 background-color: @navbar-inverse-link-disabled-bg;
251 // Darken the responsive nav toggle
253 border-color: @navbar-inverse-toggle-border-color;
256 background-color: @navbar-inverse-toggle-hover-bg;
259 background-color: @navbar-inverse-toggle-icon-bar-bg;
269 background-color: @navbar-inverse-link-active-bg;
270 color: @navbar-inverse-link-active-color;
273 > .dropdown > a:hover .caret {
274 border-top-color: @navbar-inverse-link-hover-color;
275 border-bottom-color: @navbar-inverse-link-hover-color;
277 > .dropdown > a .caret {
278 border-top-color: @navbar-inverse-link-color;
279 border-bottom-color: @navbar-inverse-link-color;
286 border-top-color: @navbar-inverse-link-active-color;
287 border-bottom-color: @navbar-inverse-link-active-color;
297 // --------------------------------------------------
299 @media screen and (min-width: @grid-float-breakpoint) {
303 margin-left: -(@navbar-padding-horizontal);
308 // undo margin to make nav extend full height of navbar
325 // Required to make the collapsing navbar work on regular desktops
332 .nav-collapse.collapse {
333 display: block !important;
334 height: auto !important;
335 overflow: visible !important;
342 // Buttons in navbars
344 // Vertically center a button within a navbar (when *not* in a form).
347 margin-top: ((@navbar-height - @input-height-base) / 2);
354 // Add a class to make any element properly align itself vertically within the navbars.
357 .navbar-vertical-align(@line-height-computed);
364 // Add a class to ensure links outside the navbar nav are colored correctly.
366 // Default navbar variables
368 color: @navbar-link-color;
370 color: @navbar-link-hover-color;
374 // Use the inverse navbar variables
375 .navbar-inverse .navbar-link {
376 color: @navbar-inverse-link-color;
378 color: @navbar-inverse-link-hover-color;