aboutsummaryrefslogtreecommitdiff
path: root/less/responsive-navbar.less
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2012-03-22 21:54:54 -0700
committerMark Otto <[email protected]>2012-03-22 21:54:54 -0700
commit20da2c8ea08da9d15b72844f54bb91c9cba8b28e (patch)
treede117cea9815ad5f1ced4e13e1c34f003046f4b4 /less/responsive-navbar.less
parentab068f6fda525236220af6e1bf879a677ed6bfc0 (diff)
downloadbootstrap-20da2c8ea08da9d15b72844f54bb91c9cba8b28e.tar.xz
bootstrap-20da2c8ea08da9d15b72844f54bb91c9cba8b28e.zip
add the broken out responsive files
Diffstat (limited to 'less/responsive-navbar.less')
-rw-r--r--less/responsive-navbar.less131
1 files changed, 131 insertions, 0 deletions
diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less
new file mode 100644
index 000000000..59e456a22
--- /dev/null
+++ b/less/responsive-navbar.less
@@ -0,0 +1,131 @@
+// 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;
+ }
+}