// TABLETS AND BELOW // ----------------- @media (max-width: 979px) { // 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: 5px; } .navbar .container { width: auto; padding: 0; } // Account for brand name .navbar .brand { padding-left: 10px; padding-right: 10px; margin: 0 0 0 -5px; } // Nav collapse clears brand .navbar .nav-collapse { clear: left; } // Block-level the nav .navbar .nav { float: none; margin: 0 0 (@baseLineHeight / 2); } .navbar .nav > li { float: none; } .navbar .nav > li > a { margin-bottom: 2px; } .navbar .nav > .divider-vertical { display: none; } .navbar .nav .nav-header { color: @navbarText; text-shadow: none; } // Nav and dropdown links in navbar .navbar .nav > li > a, .navbar .dropdown-menu a { padding: 6px 15px; font-weight: bold; color: @navbarLinkColor; .border-radius(3px); } .navbar .dropdown-menu li + li a { margin-bottom: 2px; } .navbar .nav > li > a:hover, .navbar .dropdown-menu a:hover { background-color: @navbarBackground; } // Dropdowns in the navbar .navbar .dropdown-menu { position: static; top: auto; left: auto; float: none; display: block; max-width: none; margin: 0 15px; padding: 0; background-color: transparent; border: none; .border-radius(0); .box-shadow(none); } .navbar .dropdown-menu:before, .navbar .dropdown-menu:after { display: none; } .navbar .dropdown-menu .divider { display: none; } // Forms in navbar .navbar-form, .navbar-search { float: none; padding: (@baseLineHeight / 2) 15px; margin: (@baseLineHeight / 2) 0; border-top: 1px solid @navbarBackground; border-bottom: 1px solid @navbarBackground; @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); .box-shadow(@shadow); } // Pull right (secondary) nav content .navbar .nav.pull-right { float: none; margin-left: 0; } // Static navbar .navbar-static .navbar-inner { padding-left: 10px; padding-right: 10px; } // Navbar button .btn-navbar { display: block; } // Hide everything in the navbar save .brand and toggle button */ .nav-collapse { overflow: hidden; height: 0; } } // DEFAULT DESKTOP // --------------- // Required to make the collapsing navbar work on regular desktops @media (min-width: 980px) { .nav-collapse.collapse { height: auto !important; overflow: visible !important; } }