// Styles for the global KCC header // ================================
.header-global {
padding-left: 0; padding-right: 0; &__brand { left: 1rem; position: absolute; right: 3.25rem; // clears the search icon/button top: 0; z-index: 1044; } &__navbar--padding { padding: 0; } &__nav-top { background-color: $primary-blue; flex-direction: row; padding-left: 1rem; padding-right: calc(2.5rem + 20px); width: 100%; } &__nav-bottom { background-color: $primary-red; flex-direction: row; padding-left: 1rem; padding-bottom: .3125rem; padding-right: 1rem; padding-top: .3125rem; width: 100%; } &__nav-local { border-bottom-color: $grey-5; flex-direction: row; border-bottom-style: solid; border-bottom-width: 1px; padding-bottom: .5rem; padding-left: 1rem; padding-right: 1rem; padding-top: .5rem; width: 100%; } &__navbar--toggler { // Mostly sdtraight from BOOTSTRAP 4 Styling border-color: rgba(0,0,0,.1); color: rgba(0,0,0,.5); position: absolute; right: 1rem; top: 3.25rem; z-index: 1032; & .navbar-toggler-icon { // Straight from the BOOTSTRAP 4 Styling background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } } &__search-icon, &__close-icon { background-color: transparent; border: 1px solid transparent; border-radius: .25rem; display: inline-block; font-size: 1rem; font-weight: 400; line-height: 1.5; padding: .375rem .75rem; position: absolute; text-align: center; top: .125rem; right: .3125rem; user-select: none; vertical-align: middle; transition-property: opacity; transition-timing-function: ease-in-out; transition-duration: .1s; z-index: 1032; }
}
.header-global__open {
bottom: 0; overflow-x: hidden; overflow-y: auto;
}
@media screen and (min-width: 410px) {
.header-global__navbar--toggler { top: 3.2rem; }
}
@media screen and (min-width: 576px) {
.header-global__navbar--toggler { top: 3.25rem; }
}
.header-global__search-icon–hidden, .header-global__close-icon–hidden {
opacity: 0; pointer-events: none; z-index: -1;
}
@media screen and (max-width: 992px) {
#headerGlobalNavbarContent.collapse.show .header-global__nav-top, #headerGlobalNavbarContent.collapsing .header-global__nav-top { padding-right: 1rem; }
}
@media screen and (max-width: 992px) {
#headerGlobalNavbarContent.collapse.show .header-global__navbar-nav--divider::after, #headerGlobalNavbarContent.collapsing .header-global__navbar-nav--divider::after { background-color: $grey-5; content: ''; display: block; height: .125rem; margin-bottom: 1rem; margin-top: .5rem; width: 100%; } #headerGlobalNavbarContent.collapse.show .header-global__navbar-nav--divider:nth-child(2)::after, #headerGlobalNavbarContent.collapsing .header-global__navbar-nav--divider:nth-child(2)::after { margin-bottom: 0; }
}
headerGlobalNavbar.header-global__navbar–search-toggle {
top: 3.5rem;
}
@media screen and (min-width: 992px) {
.navbar-expand-lg .navbar-nav .header-global__nav-local--navbar-brand.nav-link { padding-left: 0; }
}
@media screen and (min-width: 992px) {
.header-global__nav-bottom--nav-link { padding-top: .75rem; padding-bottom: .75rem; }
}
@media screen and (min-width: 992px) {
.header-global__nav-top--nav-link { padding-top: .3125rem; padding-bottom: .3125rem; }
}
@media screen and (min-width: 992px) {
.navbar-expand-lg .navbar-nav .header-global__nav-top--nav-link { padding-left: .9rem; padding-right: .9rem; }
}
@media screen and (min-width: 992px) {
a.header-global__nav-top--nav-link { position: relative; } a.header-global__nav-top--nav-link::after, a.header-global__nav-top--nav-link::after { background-color: $orange-heading; bottom: 0; content: ''; display: block; height: .125rem; opacity: 0; position: absolute; transition: opacity 0.3s, transform 0.3s; width: calc(100% - 1.8rem); // The `- 1.8rem` in `calc (100% - 1.8rem)` offsets the padding-left/right: .9rem on the links } a.header-global__nav-top--nav-link:hover::after, a.header-global__nav-top--nav-link:focus::after { opacity: 1; transform: translateY(-0.2em); }
}
@media screen and (min-width: 992px) {
.header-global__nav-bottom { padding-bottom: 0; padding-top: 0; }
}
@media screen and (min-width: 992px) {
a.header-global__nav-bottom--nav-link { position: relative; } a.header-global__nav-bottom--nav-link.header-global__nav-bottom--underlined::after { background-color: $orange-heading; color: $orange-heading; bottom: .25rem; border-top-width: .125rem; content: ''; display: block; height: .125rem; margin-left: 0; opacity: 0; position: absolute; transition: opacity 0.3s, transform 0.3s; width: calc(100% - 1rem); // The `- 1.8rem` in `calc (100% - 1.8rem)` offsets the padding-left/right: .5rem on the links } a.header-global__nav-bottom--nav-link.header-global__nav-bottom--underlined::after { opacity: 1; transform: translateY(-0.2em); }
}
@media screen and (min-width: 992px) {
.header-global__nav-local { padding-bottom: .5rem; padding-top: .5rem; }
}
.header-global__brand–svg {
fill: $white; height: 28px; max-width: 100%; & .st0 { fill: none; }
}
@media screen and (min-width: 992px) and (max-width: 1040px) { // the KCC word logo needs to shrink a little bit at these screen sizes
.header-global__brand--svg { height: 22px; }
}
@media screen and (min-width: 1041px) {
.header-global__brand--svg { height: 26px; }
}
@media screen and (min-width: 992px) {
.header-global__brand { top: 3.125rem; right: auto; // gotta set this to "auto" otherwise, it blocks the other navbar links }
}
headerGlobalNavbarContent.collapse.show .typography__nav-heading, headerGlobalNavbarContent.collapsing .typography__nav-heading {
font-size: 1.5rem;
}
headerGlobalNavbarContent.collapse.show .navbar-nav, headerGlobalNavbarContent.collapsing .navbar-nav {
flex-direction: column; background-color: $grey-4;
}
headerGlobalNavbarContent.collapse.show .header-global__nav-top, // BOOTSTRAP 4 Selectors for when the menu is open/opening headerGlobalNavbarContent.collapsing .header-global__nav-top { // This rule-group is to pull the menu down, on mobile/tablet and provide a red background for the KCC text-logo & Search Icon.
position: relative; top: 2.65rem; // Pull the menu down from its normal spot margin-bottom: 2.65rem; &::before { // Create & position a pseudo-element to make the red background background-color: $primary-red; content: ''; display: block; height: 2.65rem; position: absolute; top: -2.65rem; left: 0; right: 0; width: 100%; z-index: -1; // This ensures the pseudo-element is behind when it has position: absolute }
}
@media screen and (max-width: 991px) {
#headerGlobalNavbarContent.collapse:not(.show) { display: block; & .header-global__nav-top { display: none; position: absolute; } & .header-global__nav-bottom .nav-link, .header-global__nav-local .nav-link:not(.navbar-brand) { visibility: hidden; } }
}
.header-global__nav–search-icon, .header-global__nav–close-icon {
background-size: 20px 20px; background-position: center; background-repeat: no-repeat; display: block; height: 20px; margin-top: .3125rem; pointer-events: none; width: 20px;
}
.header-global__search-collapse {
left: .5rem; margin-left: auto; margin-right: auto; position: absolute; right: 2rem; top: -56px; width: 95%;
}
@media screen and (min-width: 360px) {
.header-global__search-collapse { left: .55rem; }
}
@media screen and (min-width: 410px) {
.header-global__search-collapse { left: .65rem; }
}
@media screen and (min-width: 410px) {
.header-global__search-collapse { left: 1rem; }
}
@media screen and (min-width: 768px) {
.header-global__search-collapse { left: 1.25rem; }
}
@media screen and (min-width: 992px) {
.header-global__search-collapse { left: 1.5rem; }
}
.header-global__search-collapse.header-global__search-collapse–visible {
top: -46px;
}
@media screen and (min-width: 992px) {
.header-global__search-collapse.header-global__search-collapse--visible { top: -40px; }
}
.header-global__navbar–search-toggle {
top: 50px;
}
.header-global__navbar–search-toggle::before {
background-color: $primary-red; content: ''; display: block; height: 64px; position: absolute; top: -60px; width: 100%;
}
@media screen and (min-width: 992px) { .header-global__navbar–search-toggle::before {
background-color: $primary-blue; }
}
@media screen and (min-width: 992px) {
.header-global__dropdown.show { background-color: $color-blue-light-nav; }
}
@keyframes meganav {
0% { opacity: 0; } 100% { opacity: 1; }
}
@media screen and (min-width: 992px) {
.header-global__nav-bottom .dropdown:hover .dropdown-menu, .header-global__nav-bottom .dropdown .dropdown-menu:hover { animation-duration: .5s; animation-name: meganav; display: block !important; // Because Bootstrap loves to use !important }
}
.header-global__nav-bottom .dropdown-item {
color: $grey-1;
}
.header-global__nav-bottom .dropdown-item:active {
background-color: $primary-blue; color: $white;
}
.header-global__nav-bottom .dropdown-item:hover, .header-global__nav-bottom .dropdown-item:focus {
background-color: $color-blue-lighter-nav; border-radius: .175rem;
}
@media screen and (min-width: 992px) {
.header-global__nav-bottom .dropdown:hover { background-color: $color-blue-light-nav; }
}
@media screen and (min-width: 992px) {
.nav-item.dropdown.header-global__dropdown--position { // First 2 classes in this selector are to override BS4 styling position: static; // Needed to allow repositioning of the open dropdown menu }
}
@media screen and (min-width: 992px) {
.header-global__dropdown-menu--full-width { left: .75rem; right: .75rem; top: 5.77rem; }
}
@media screen and (min-width: 1300px) {
.header-global__dropdown-menu--full-width { left: 1rem; right: 1rem; }
}
@media screen and (min-width: 992px) {
.header-global__drodpown-menu--img { width: 280px; &--border { border: thin solid $grey-8; } }
}
@media screen and (max-width: 991px) {
.header-global__core::after { // This provides the light-gray background for the navbar in mobile on core sites only content: ''; display: block; height: 60px; background-color: $grey-4; // Same light-gray as in Bootstrap border-bottom-color: $grey-5; // Same border-bottom as in Bootstrap border-bottom-style: solid; border-bottom-width: 1px; }
}
@media screen and (min-width: 992px) {
#navGlobalTop .header-global__nav-top--nav-link { margin-top: .3125rem; }
}
.header-global__row–max-width {
min-width: 100%;
}
@media screen and (min-width: 992px) {
.header-global__col--column-count { column-count: 2; }
}