git.fiddlerwoaroof.com
less/responsive-navbar.less
489b3d20
 // TABLETS AND BELOW
 // -----------------
 @media (max-width: 979pt) {
 
   // UNFIX THE TOPBAR
   // ----------------
   // Remove any padding from the body
   body {
     padding-top: 0;
   }
   // Unfix the navbar
   .navbar-fixed-top {
     position: static;
     margin-bottom: @baseLineHeight;
   }
   .navbar-fixed-top .navbar-inner {
     padding: 5pt;
   }
   .navbar .container {
     width: auto;
     padding: 0;
   }
   // Account for brand name
   .navbar .brand {
     padding-left: 10pt;
     padding-right: 10pt;
     margin: 0 0 0 -5pt;
   }
 
   // COLLAPSIBLE NAVBAR
   // ------------------
   // Nav collapse clears brand
   .nav-collapse {
     clear: both;
   }
   // Block-level the nav
   .nav-collapse .nav {
     float: none;
     margin: 0 0 (@baseLineHeight / 2);
   }
   .nav-collapse .nav > li {
     float: none;
   }
   .nav-collapse .nav > li > a {
     margin-bottom: 2pt;
   }
   .nav-collapse .nav > .divider-vertical {
     display: none;
   }
   .nav-collapse .nav .nav-header {
     color: @navbarText;
     text-shadow: none;
   }
   // Nav and dropdown links in navbar
   .nav-collapse .nav > li > a,
   .nav-collapse .dropdown-menu a {
     padding: 6pt 15pt;
     font-weight: bold;
     color: @navbarLinkColor;
     .border-radius(3pt);
   }
   // Buttons
   .nav-collapse .btn {
     padding: 4pt 10pt 4pt;
     font-weight: normal;
     .border-radius(4pt);
   }
   .nav-collapse .dropdown-menu li + li a {
     margin-bottom: 2pt;
   }
   .nav-collapse .nav > li > a:hover,
   .nav-collapse .dropdown-menu a:hover {
     background-color: @navbarBackground;
   }
   // Buttons in the navbar
   .nav-collapse.in .btn-group {
     margin-top: 5pt;
     padding: 0;
   }
   // Dropdowns in the navbar
   .nav-collapse .dropdown-menu {
     position: static;
     top: auto;
     left: auto;
     float: none;
     display: block;
     max-width: none;
     margin: 0 15pt;
     padding: 0;
     background-color: transparent;
     border: none;
     .border-radius(0);
     .box-shadow(none);
   }
   .nav-collapse .dropdown-menu:before,
   .nav-collapse .dropdown-menu:after {
     display: none;
   }
   .nav-collapse .dropdown-menu .divider {
     display: none;
   }
   // Forms in navbar
   .nav-collapse .navbar-form,
   .nav-collapse .navbar-search {
     float: none;
     padding: (@baseLineHeight / 2) 15pt;
     margin: (@baseLineHeight / 2) 0;
     border-top: 1pt solid @navbarBackground;
     border-bottom: 1pt solid @navbarBackground;
     .box-shadow(~"inset 0 1pt 0 rgba(255,255,255,.1), 0 1pt 0 rgba(255,255,255,.1)");
   }
   // Pull right (secondary) nav content
   .navbar .nav-collapse .nav.pull-right {
     float: none;
     margin-left: 0;
   }
   // Hide everything in the navbar save .brand and toggle button */
   .nav-collapse,
   .nav-collapse.collapse {
     overflow: hidden;
     height: 0;
   }
   // Navbar button
   .navbar .btn-navbar {
     display: block;
   }
 
   // STATIC NAVBAR
   // -------------
   .navbar-static .navbar-inner {
     padding-left:  10pt;
     padding-right: 10pt;
   }
 }
 
 
 // DEFAULT DESKTOP
 // ---------------
 
 // Required to make the collapsing navbar work on regular desktops
 @media (min-width: 980pt) {
   .nav-collapse.collapse {
     height: auto !important;
     overflow: visible !important;
   }
 }