css/bootstrap/responsive-navbar.less

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