// // Responsive: Navbar // -------------------------------------------------- // Grays // ------------------------- $black: #000 !default; $grayDarker: #222 !default; $grayDark: #403833 !default; $gray: #777 !default; $grayLight: #999 !default; $grayLighter: #eee !default; $white: #fff !default; // Accent colors // ------------------------- $blueLighter: #b7c7db !default; $blueLight: #00aeef !default; $blue: #0063b8 !default; $blueDark: #103573 !default; $blueDarker: #092451 !default; $green: #86bc04 !default; $red: #9d261d !default; $yellow: #fef200 !default; $orange: #ff6600 !default; $pink: #c3325f !default; $purple: #7a43b6 !default; $emerald: #00959e !default; $accent: $blueLight !default; $accent-sec: $grayDark !default; $sideColor1: #ffffff !default; $sideColor2: #f3f3f3 !default; $sideColor3: #143073 !default; $baseLineHeight: 24px !default; $baseBorderRadius: 0 !default; // Navbar // ------------------------- $navbarCollapseWidth: 1001px !default; $navbarCollapseDesktopWidth: $navbarCollapseWidth + 1; $navbarHeight: 40px !default; $navbarBackgroundHighlight: #f2ebe3 !default; $navbarBackground: #ffffff !default; $navbarBorder: darken($navbarBackground, 12%) !default; $navbarText: $accent-sec !default; $navbarLinkColor: $accent-sec !default; $navbarLinkColorHover: $gray !default; $navbarLinkColorActive: $gray !default; $navbarLinkBackgroundHover: transparent !default; $navbarLinkBackgroundActive: transparent !default; $navbarBrandColor: $navbarLinkColor !default; // Inverted navbar $navbarInverseBackground: #944a00 !default; $navbarInverseBackgroundHighlight: #ff9200 !default; $navbarInverseBorder: #252525 !default; $navbarInverseText: $grayLight !default; $navbarInverseLinkColor: #b5b5b5 !default; $navbarInverseLinkColorHover: $white !default; $navbarInverseLinkColorActive: $navbarInverseLinkColorHover !default; $navbarInverseLinkBackgroundHover: transparent !default; $navbarInverseLinkBackgroundActive: $navbarInverseBackground !default; $navbarInverseSearchBackground: #c5c5c5 !default; $navbarInverseSearchBackgroundFocus: $white !default; $navbarInverseSearchBorder: $navbarInverseBackground !default; $navbarInverseSearchPlaceholderColor: #576063 !default; $navbarInverseBrandColor: $navbarInverseLinkColor !default; // TABLETS AND BELOW // ----------------- @media all and (max-width: $navbarCollapseWidth) { // UNFIX THE TOPBAR // ---------------- // Remove any padding from the body body { padding-top: 0; } // Unfix the navbars .navbar-fixed-top, .navbar-fixed-bottom { position: static; } .navbar-fixed-top { margin-bottom: $baseLineHeight; } .navbar-fixed-bottom { margin-top: $baseLineHeight; } .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .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; } // 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: 2px; } .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: 9px 15px; font-weight: bold; color: $navbarLinkColor; @include border-radius(3px); } // Buttons .nav-collapse .btn { padding: 4px 10px 4px; font-weight: normal; @include border-radius($baseBorderRadius); } .nav-collapse .dropdown-menu li + li a { margin-bottom: 2px; } .nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus { background-color: #e2e2e2; color: #1f9dd1; } .navbar-inverse .nav-collapse .nav > li > a, .navbar-inverse .nav-collapse .dropdown-menu a { color: $navbarInverseLinkColor; } .navbar-inverse .nav-collapse .nav > li > a:hover, .navbar-inverse .nav-collapse .nav > li > a:focus, .navbar-inverse .nav-collapse .dropdown-menu a:hover, .navbar-inverse .nav-collapse .dropdown-menu a:focus { background-color: $navbarInverseBackground; } // Buttons in the navbar .nav-collapse.in .btn-group { margin-top: 5px; padding: 0; } // Dropdowns in the navbar .nav-collapse .dropdown-menu { position: static; top: auto; left: auto; float: none; display: none; max-width: none; margin: 0 0 0 15px; padding: 0; background-color: transparent; border: none; @include border-radius(0); @include box-shadow(none); } .nav-collapse .dropdown-menu .dropdown-menu {margin-left: 15px !important;} .nav-collapse .open > .dropdown-menu { display: block; } .nav-collapse .dropdown-menu:before, .nav-collapse .dropdown-menu:after { display: none; } .nav-collapse .dropdown-menu .divider { display: none; } .nav-collapse .nav > li > .dropdown-menu { &:before, &:after { display: none; } } // Forms in navbar .nav-collapse .navbar-form, .nav-collapse .navbar-search { float: none; padding: ($baseLineHeight / 2) 15px; margin: ($baseLineHeight / 2) 0; border-top: 1px solid $navbarBackground; border-bottom: 1px solid $navbarBackground; @include box-shadow(inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)); } .navbar-inverse .nav-collapse .navbar-form, .navbar-inverse .nav-collapse .navbar-search { border-top-color: $navbarInverseBackground; border-bottom-color: $navbarInverseBackground; } // 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: 10px; padding-right: 10px; } } // DEFAULT DESKTOP // --------------- @media all and (min-width: $navbarCollapseDesktopWidth) { // Required to make the collapsing navbar work on regular desktops .nav-collapse.collapse { height: auto !important; overflow: visible !important; } }