responsive-navbar.less 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. //
  2. // Responsive: Navbar
  3. // --------------------------------------------------
  4. // TABLETS AND BELOW
  5. // -----------------
  6. @media (max-width: @navbarCollapseWidth) {
  7. // UNFIX THE TOPBAR
  8. // ----------------
  9. // Remove any padding from the body
  10. body {
  11. padding-top: 0;
  12. }
  13. // Unfix the navbars
  14. .navbar-fixed-top,
  15. .navbar-fixed-bottom {
  16. position: static;
  17. }
  18. .navbar-fixed-top {
  19. margin-bottom: @baseLineHeight;
  20. }
  21. .navbar-fixed-bottom {
  22. margin-top: @baseLineHeight;
  23. }
  24. .navbar-fixed-top .navbar-inner,
  25. .navbar-fixed-bottom .navbar-inner {
  26. padding: 5px;
  27. }
  28. .navbar .container {
  29. width: auto;
  30. padding: 0;
  31. }
  32. // Account for brand name
  33. .navbar .brand {
  34. padding-left: 10px;
  35. padding-right: 10px;
  36. margin: 0 0 0 -5px;
  37. }
  38. // COLLAPSIBLE NAVBAR
  39. // ------------------
  40. // Nav collapse clears brand
  41. .nav-collapse {
  42. clear: both;
  43. }
  44. // Block-level the nav
  45. .nav-collapse .nav {
  46. float: none;
  47. margin: 0 0 (@baseLineHeight / 2);
  48. }
  49. .nav-collapse .nav > li {
  50. float: none;
  51. }
  52. .nav-collapse .nav > li > a {
  53. margin-bottom: 2px;
  54. }
  55. .nav-collapse .nav > .divider-vertical {
  56. display: none;
  57. }
  58. .nav-collapse .nav .nav-header {
  59. color: @navbarText;
  60. text-shadow: none;
  61. }
  62. // Nav and dropdown links in navbar
  63. .nav-collapse .nav > li > a,
  64. .nav-collapse .dropdown-menu a {
  65. padding: 9px 15px;
  66. font-weight: bold;
  67. color: @navbarLinkColor;
  68. .border-radius(3px);
  69. }
  70. // Buttons
  71. .nav-collapse .btn {
  72. padding: 4px 10px 4px;
  73. font-weight: normal;
  74. .border-radius(4px);
  75. }
  76. .nav-collapse .dropdown-menu li + li a {
  77. margin-bottom: 2px;
  78. }
  79. .nav-collapse .nav > li > a:hover,
  80. .nav-collapse .dropdown-menu a:hover {
  81. background-color: @navbarBackground;
  82. }
  83. .navbar-inverse .nav-collapse .nav > li > a:hover,
  84. .navbar-inverse .nav-collapse .dropdown-menu a:hover {
  85. background-color: @navbarInverseBackground;
  86. }
  87. // Buttons in the navbar
  88. .nav-collapse.in .btn-group {
  89. margin-top: 5px;
  90. padding: 0;
  91. }
  92. // Dropdowns in the navbar
  93. .nav-collapse .dropdown-menu {
  94. position: static;
  95. top: auto;
  96. left: auto;
  97. float: none;
  98. display: block;
  99. max-width: none;
  100. margin: 0 15px;
  101. padding: 0;
  102. background-color: transparent;
  103. border: none;
  104. .border-radius(0);
  105. .box-shadow(none);
  106. }
  107. .nav-collapse .dropdown-menu:before,
  108. .nav-collapse .dropdown-menu:after {
  109. display: none;
  110. }
  111. .nav-collapse .dropdown-menu .divider {
  112. display: none;
  113. }
  114. .nav-collapse .nav > li > .dropdown-menu {
  115. &:before,
  116. &:after {
  117. display: none;
  118. }
  119. }
  120. // Forms in navbar
  121. .nav-collapse .navbar-form,
  122. .nav-collapse .navbar-search {
  123. float: none;
  124. padding: (@baseLineHeight / 2) 15px;
  125. margin: (@baseLineHeight / 2) 0;
  126. border-top: 1px solid @navbarBackground;
  127. border-bottom: 1px solid @navbarBackground;
  128. .box-shadow(inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1));
  129. }
  130. .navbar-inverse .nav-collapse .navbar-form,
  131. .navbar-inverse .nav-collapse .navbar-search {
  132. border-top-color: @navbarInverseBackground;
  133. border-bottom-color: @navbarInverseBackground;
  134. }
  135. // Pull right (secondary) nav content
  136. .navbar .nav-collapse .nav.pull-right {
  137. float: none;
  138. margin-left: 0;
  139. }
  140. // Hide everything in the navbar save .brand and toggle button */
  141. .nav-collapse,
  142. .nav-collapse.collapse {
  143. overflow: hidden;
  144. height: 0;
  145. }
  146. // Navbar button
  147. .navbar .btn-navbar {
  148. display: block;
  149. }
  150. // STATIC NAVBAR
  151. // -------------
  152. .navbar-static .navbar-inner {
  153. padding-left: 10px;
  154. padding-right: 10px;
  155. }
  156. }
  157. // DEFAULT DESKTOP
  158. // ---------------
  159. @media (min-width: 980px) {
  160. // Required to make the collapsing navbar work on regular desktops
  161. .nav-collapse.collapse {
  162. height: auto !important;
  163. overflow: visible !important;
  164. }
  165. }