.navbar-primary {
@extend .navbar; @extend .navbar-expand-lg; @extend .navbar-dark; background-color: theme-color("secondary"); height: 53px; box-shadow: $navbar-shadow; @include media-breakpoint-up(md) { height: 80px; } .navbar-nav:not(.navbar-icon) { @include media-breakpoint-down(md) { padding: 0 30px; .nav-item + .nav-item { border-top: 1px solid rgba(127, 145, 165, 0.5); } } .nav-link { font-size: 1rem; font-weight: 500; height: 100%; padding-left: $nav-link-padding-x; padding-right: $nav-link-padding-x; display: flex; align-items: center; position: relative; text-transform: capitalize; @include media-breakpoint-down(md) { padding: 0.75rem; font-size: 1.125rem; width: fit-content; } &:focus:not(.active), &:hover:not(.active) { color: theme-color("primary"); } &.active { font-weight: 700; &:after { content: ""; position: absolute; left: $nav-link-padding-x; right: $nav-link-padding-x; bottom: 0; border-bottom: 4px solid theme-color("primary"); width: calc(100% - 2.5rem); @include media-breakpoint-down(md) { width: calc(100% - 1.5rem); left: 0.75rem; right: 0.75rem; bottom: 10px; } } } } } .container { height: 100%; }
}
.navbar-secondary {
&.fixed { position: absolute; z-index: 10; top: 80px; left: 0; right: 0; } &.bg-white { position: relative; top: 0; } .navbar-nav { margin-left: -$nav-secondary-link-padding-x; .nav-link { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; height: 100%; padding: $nav-secondary-link-padding-y $nav-secondary-link-padding-x; position: relative; &:after { display: block; content: attr(title); font-weight: bold; height: 0; overflow: hidden; visibility: hidden; } } .nav-link { &.active, &:focus, &:hover { font-weight: 700; } } }
}
.btn-login {
align-self: stretch; display: flex; align-items: center; padding: 0.7825rem 2rem; text-transform: uppercase; font-weight: 500; font-size: 0.75rem; .icon-user { margin-right: 0.25rem; } @include media-breakpoint-down(md) { background-color: transparent; border-color: transparent; position: absolute; bottom: 54px; right: 0; }
}
.navbar-icon {
@extend .flex-row; @extend .ml-md-auto; @extend .d-flex; padding-right: 1.25rem; // margin-top: -4px; @include media-breakpoint-down(md) { position: absolute; bottom: 70px; left: 25px; } .nav-link-icon { color: theme-color("primary"); font-weight: 500; text-transform: uppercase; padding-left: 0.625rem; padding-right: 0; display: -webkit-flex; display: -ms-flex; display: flex; &:hover { opacity: 0.8; } svg { margin-right: 5px; &.icon-search { margin-right: 10px; } } small { font-weight: 500; font-size: 85.75%; line-height: 0.8; align-self: center; @include media-breakpoint-down(md) { display: none; } } @include media-breakpoint-down(md) { svg { height: 19px; width: auto; } } svg { vertical-align: middle; } }
}
.navbar-toggler {
border-width: 0;
}
.navbar-brand {
margin-right: 70px; @include media-breakpoint-down(md) { padding-top: 0; margin-right: 0; img { width: 100px; } }
}
.mobile-buttons-group {
display: flex; align-items: center;
}
.navbar-search {
display: flex; padding-right: 1.25rem; background-color: transparent; border: transparent; @include media-breakpoint-up(lg) { display: none; }
}
.navbar-collapse {
@include media-breakpoint-down(md) { background-color: theme-color("secondary"); position: fixed; display: block !important; top: 0; right: 0; bottom: 0; width: 315px; z-index: 2000; height: 100vh; transform: translateX(340px); transition: transform 0.2s ease-in-out; overflow: scroll; -webkit-overflow-scrolling: touch; &.show { transform: translateX(0px); } }
}
.navbar-collapse-header {
height: 53px; display: flex; justify-content: flex-end; padding: 0 1.25rem; @include media-breakpoint-up(lg) { display: none; }
}
.overlay {
background-color: $navy-50; position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 1000; display: none; &.show { display: block; }
}
.navbar-collapse-inner {
@include media-breakpoint-down(md) { min-height: 450px; height: 100vh; position: relative; } @include media-breakpoint-up(lg) { width: 100%; display: flex !important; flex-basis: auto; height: 100%; align-items: center; }
}