// // Navbars // -------------------------------------------------- // Wrapper and base class // // Provide a static navbar from which we expand to create full-width, fixed, and // other navbar variations. .navbar { position: relative; padding: $spacer; margin-bottom: $navbar-margin-bottom; // Prevent floats from breaking the navbar @include clearfix(); @media (min-width: $grid-float-breakpoint) { @include border-radius($navbar-border-radius); } } // // Navbar alignment options // // Display the navbar across the entirety of the page or fixed it to the top or // bottom of the page. // Static top (unfixed, but 100% wide) navbar .navbar-static-top { z-index: $zindex-navbar; border-width: 0 0 1px; @media (min-width: $grid-float-breakpoint) { @include border-radius(0); } } // Fix the top/bottom navbars when screen real estate supports it .navbar-fixed-top, .navbar-fixed-bottom { position: fixed; right: 0; left: 0; z-index: $zindex-navbar-fixed; // Undo the rounded corners @media (min-width: $grid-float-breakpoint) { @include border-radius(0); } } .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar-fixed-bottom { bottom: 0; margin-bottom: 0; // override .navbar defaults border-width: 1px 0 0; } // Brand/project name .navbar-brand { float: left; padding: .725rem .75rem; margin-right: $spacer; margin-bottom: 0; // For headings font-size: $font-size-lg; line-height: $line-height-computed; > a:hover, > a:focus { text-decoration: none; } > img { display: block; } } // Navbar toggle // // Custom button for toggling the `.navbar-collapse`, powered by the collapse // JavaScript plugin. .navbar-toggler { float: left; padding: .55rem .75rem; margin-right: $spacer; margin-bottom: 0; // For headings font-size: $font-size-lg; line-height: $line-height-computed; background: none; border: 0; &:hover, &:focus { text-decoration: none; } } // Navbar nav links // // Builds on top of the `.nav` components with its own modifier class to make // the nav the full height of the horizontal nav (above 768px). // .navbar-nav { // margin: ($navbar-padding-vertical / 2) -$navbar-padding-horizontal; // > li > a { // padding-top: 10px; // padding-bottom: 10px; // line-height: $line-height-computed; // } // @media (max-width: $grid-float-breakpoint-max) { // // Dropdowns get custom display when collapsed // .open .dropdown-menu { // position: static; // float: none; // width: auto; // margin-top: 0; // background-color: transparent; // border: 0; // @include box-shadow(none); // > li > a, // .dropdown-header { // padding: 5px 15px 5px 25px; // } // > li > a { // line-height: $line-height-computed; // &:hover, // &:focus { // background-image: none; // } // } // } // } // // Uncollapse the nav // @media (min-width: $grid-float-breakpoint) { // float: left; // margin: 0; // > li { // float: left; // > a { // padding-top: $navbar-padding-vertical; // padding-bottom: $navbar-padding-vertical; // } // } // } // } // Navbar form // // Extension of the `.form-inline` with some extra flavor for optimum display in // our navbars. .navbar-form { padding: 10px $navbar-padding-horizontal; margin-right: -$navbar-padding-horizontal; margin-left: -$navbar-padding-horizontal; border-top: 1px solid transparent; border-bottom: 1px solid transparent; @include box-shadow(inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)); // Mixin behavior for optimum display @extend .form-inline; .form-group { @media (max-width: $grid-float-breakpoint-max) { margin-bottom: 5px; &:last-child { margin-bottom: 0; } } } // Vertically center in expanded, horizontal navbar // @include navbar-vertical-align($input-height-base); // Undo 100% width for pull classes @media (min-width: $grid-float-breakpoint) { width: auto; padding-top: 0; padding-bottom: 0; margin-right: 0; margin-left: 0; border: 0; @include box-shadow(none); } } // Dropdown menus // Menu position and menu carets .navbar-nav > li > .dropdown-menu { margin-top: 0; @include border-top-radius(0); } // Menu position and menu caret support for dropups via extra dropup class .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { @include border-top-radius($navbar-border-radius); @include border-bottom-radius(0); } // Buttons in navbars // // Vertically center a button within a navbar (when *not* in a form). // .navbar-btn { // @include navbar-vertical-align($input-height-base); // &.btn-sm { // @include navbar-vertical-align($input-height-sm); // } // &.btn-xs { // @include navbar-vertical-align(22); // } // } // Text in navbars // // Add a class to make any element properly align itself vertically within the navbars. .navbar-text { // @include navbar-vertical-align($line-height-computed); @media (min-width: $grid-float-breakpoint) { float: left; margin-right: $navbar-padding-horizontal; margin-left: $navbar-padding-horizontal; } } // Component alignment // // Repurpose the pull utilities as their own navbar utilities to avoid specificity // issues with parents and chaining. Only do this when the navbar is uncollapsed // though so that navbar contents properly stack and align in mobile. // // Declared after the navbar components to ensure more specificity on the margins. @media (min-width: $grid-float-breakpoint) { .navbar-left { @extend .pull-left; } .navbar-right { @extend .pull-right; margin-right: -$navbar-padding-horizontal; ~ .navbar-right { margin-right: 0; } } } // Alternate navbars // -------------------------------------------------- // Default navbar .navbar-default { background-color: $navbar-default-bg; border-color: $navbar-default-border; .navbar-brand { color: $navbar-default-brand-color; &:hover, &:focus { color: $navbar-default-brand-hover-color; background-color: $navbar-default-brand-hover-bg; } } .navbar-text { color: $navbar-default-color; } .navbar-nav { > li > a { color: $navbar-default-link-color; &:hover, &:focus { color: $navbar-default-link-hover-color; background-color: $navbar-default-link-hover-bg; } } > .active > a { &, &:hover, &:focus { color: $navbar-default-link-active-color; background-color: $navbar-default-link-active-bg; } } > .disabled > a { &, &:hover, &:focus { color: $navbar-default-link-disabled-color; background-color: $navbar-default-link-disabled-bg; } } } .navbar-toggle { border-color: $navbar-default-toggle-border-color; &:hover, &:focus { background-color: $navbar-default-toggle-hover-bg; } .icon-bar { background-color: $navbar-default-toggle-icon-bar-bg; } } .navbar-collapse, .navbar-form { border-color: $navbar-default-border; } // Dropdown menu items .navbar-nav { // Remove background color from open dropdown > .open > a { &, &:hover, &:focus { color: $navbar-default-link-active-color; background-color: $navbar-default-link-active-bg; } } @media (max-width: $grid-float-breakpoint-max) { // Dropdowns get custom display when collapsed .open .dropdown-menu { > li > a { color: $navbar-default-link-color; &:hover, &:focus { color: $navbar-default-link-hover-color; background-color: $navbar-default-link-hover-bg; } } > .active > a { &, &:hover, &:focus { color: $navbar-default-link-active-color; background-color: $navbar-default-link-active-bg; } } > .disabled > a { &, &:hover, &:focus { color: $navbar-default-link-disabled-color; background-color: $navbar-default-link-disabled-bg; } } } } } // Links in navbars // // Add a class to ensure links outside the navbar nav are colored correctly. .navbar-link { color: $navbar-default-link-color; &:hover { color: $navbar-default-link-hover-color; } } .btn-link { color: $navbar-default-link-color; &:hover, &:focus { color: $navbar-default-link-hover-color; } &[disabled], fieldset[disabled] & { &:hover, &:focus { color: $navbar-default-link-disabled-color; } } } } // Inverse navbar .navbar-inverse { background-color: $navbar-inverse-bg; border-color: $navbar-inverse-border; .navbar-toggler, .navbar-brand > a, .nav-pills > .nav-item > .nav-link { color: $navbar-inverse-link-color; &:hover, &:focus { color: $navbar-inverse-link-hover-color; } } .nav-pills > .nav-item > .nav-link { &:hover, &:focus { color: $navbar-inverse-link-active-color; background-color: $navbar-inverse-link-active-bg; } } .nav-pills > .active > .nav-link, .nav-pills > .nav-link.active { color: $navbar-inverse-link-active-color; background-color: $navbar-inverse-link-active-bg; } .navbar-brand { color: $navbar-inverse-brand-color; &:hover, &:focus { color: $navbar-inverse-brand-hover-color; background-color: $navbar-inverse-brand-hover-bg; } } .navbar-text { color: $navbar-inverse-color; } .navbar-nav { > li > a { color: $navbar-inverse-link-color; &:hover, &:focus { color: $navbar-inverse-link-hover-color; background-color: $navbar-inverse-link-hover-bg; } } > .active > a { &, &:hover, &:focus { color: $navbar-inverse-link-active-color; background-color: $navbar-inverse-link-active-bg; } } > .disabled > a { &, &:hover, &:focus { color: $navbar-inverse-link-disabled-color; background-color: $navbar-inverse-link-disabled-bg; } } } // Darken the responsive nav toggle .navbar-toggle { border-color: $navbar-inverse-toggle-border-color; &:hover, &:focus { background-color: $navbar-inverse-toggle-hover-bg; } .icon-bar { background-color: $navbar-inverse-toggle-icon-bar-bg; } } .navbar-collapse, .navbar-form { border-color: darken($navbar-inverse-bg, 7%); } // Dropdowns .navbar-nav { > .open > a { &, &:hover, &:focus { color: $navbar-inverse-link-active-color; background-color: $navbar-inverse-link-active-bg; } } @media (max-width: $grid-float-breakpoint-max) { // Dropdowns get custom display .open .dropdown-menu { > .dropdown-header { border-color: $navbar-inverse-border; } .divider { background-color: $navbar-inverse-border; } > li > a { color: $navbar-inverse-link-color; &:hover, &:focus { color: $navbar-inverse-link-hover-color; background-color: $navbar-inverse-link-hover-bg; } } > .active > a { &, &:hover, &:focus { color: $navbar-inverse-link-active-color; background-color: $navbar-inverse-link-active-bg; } } > .disabled > a { &, &:hover, &:focus { color: $navbar-inverse-link-disabled-color; background-color: $navbar-inverse-link-disabled-bg; } } } } } .navbar-link { color: $navbar-inverse-link-color; &:hover { color: $navbar-inverse-link-hover-color; } } .btn-link { color: $navbar-inverse-link-color; &:hover, &:focus { color: $navbar-inverse-link-hover-color; } &[disabled], fieldset[disabled] & { &:hover, &:focus { color: $navbar-inverse-link-disabled-color; } } } }