File: //proc/thread-self/root/home/awaldron/_domains/knowtifi.alanwaldron.com/php/scss/custom/_nav.scss
#main-nav {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
#main-logo {
display: block;
width: 275px;
position: relative;
top: -6px;
@media (max-width:991px) {
width: 225px;
top: -5px;
}
}
#topnav {
a, a:link, a:active, a:visited {
color: $white;
font-family: "quatro", "Montserrat", sans-serif;
font-weight: 600;
@include transition(all 0.25s ease);
}
a:hover {
font-family: "quatro", "Montserrat", sans-serif;
font-weight: 600;
color: $orange;
}
a.active {
color: $orange;
display: inline-block;
}
a.quote {
background-color: $orange;
color: $white;
padding: auto 20px;
@include doubleRound(16px);
@include transition(all 0.25s ease);
&:hover {
background-color: $aqua;
}
}
@media (max-width:991px) {
zoom: 86%;
top: 8px;
li.nav-item:first-child {
display:none;
}
}
@media (max-width:767px) {
zoom: 100%;
display: block;
position: fixed;
top: 81px;
right: 0px;
background-color: $blue;
z-index: 11;
width: 100vw;
text-align: center;
padding: 0 20px;
overflow: hidden;
height: 0;
@include transition(all 0.5s ease);
&.open {
height: 300px;
}
li.nav-item {
border-bottom: solid 1px lighten($blue,5%);
&:first-child {
display: list-item;
}
&:last-child {
padding-bottom: 30px;
}
a {
padding: 12px 0;
}
}
}
}
i.fa-bars {
display: none;
float: right;
color: $white;
position: relative;
top: 6px;
right: 6px;
cursor: pointer;
transform: rotate(0deg);
@include rem-size(1.75);
@include transition(all 0.5s ease);
&.open {
transform: rotate(90deg);
color: $orange;
top: -2px;
right: 14px;
}
@media (max-width:767px) {
display: inline-block;
}
}
}