blob: 92710e62b6c2331a746d7523381950377163d1a2 [file] [log] [blame]
//
// Main navbar
//
.td-navbar-cover {
background: $primary;
@include media-breakpoint-up(md) {
background: transparent !important;
.nav-link {
text-shadow: 1px 1px 2px $dark;
}
}
&.navbar-bg-onscroll .nav-link {
text-shadow: none;
}
}
.navbar-bg-onscroll {
background: $primary !important;
opacity: inherit;
}
.td-navbar {
background: $primary;
min-height: 4rem;
margin: 0;
z-index: 10000;
@include media-breakpoint-up(md) {
position: fixed;
top: 0;
width: 100%;
}
.navbar-brand {
text-transform: none;
text-align: middle;
.nav-link {
display: inline-block;
margin-right: -30px;
}
svg {
display: inline-block;
margin: 0 10px;
height: 30px;
}
img {
display: inline-block;
margin: 0 10px;
height: 30px;
}
}
.nav-link {
text-transform: none;
font-weight: $font-weight-bold;
}
.td-search-input {
border: none;
@include placeholder {
color: $navbar-dark-color;
}
}
.dropdown {
&:hover {
.dropdown-menu {
visibility: visible;
opacity: 1;
transform: scaleX(1);
}
}
&-menu {
box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.12);
padding: 15px;
border: 0;
left: -25px;
border-radius: 0;
display: block;
visibility: hidden;
transition: .3s ease;
opacity: 0;
transform: scale(.8);
background: white;
&:hover {
color: blue;
background: white;
}
&:focus {
color: blue;
}
}
}
@include media-breakpoint-down(md) {
padding-right: .5rem;
padding-left: .75rem;
.td-navbar-nav-scroll {
max-width: 100%;
height: 2.5rem;
//margin-top: .25rem;
//overflow: hidden;
font-size: .875rem;
.nav-link {
padding-right: .25rem;
padding-left: 0;
}
.navbar-nav {
padding-bottom: 2rem;
//overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
}
}
}