_sass/_navigation.scss
/* Navigation bar styles */
nav.nav-topnav {
transition: all 0.25s ease;
background-color: $color-base;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
&.scrolled {
.usa-banner {
display: none;
}
}
@media only screen and (min-width: $nav-breakpoint) {
&.scrolled {
.nav-title {
a.nav-title-logo img {
height: 40px;
width: 40px;
}
a.nav-title-text {
padding: 10px 0 0 0;
}
}
ul.nav-list {
li a {
margin: 0;
}
}
}
&.nav-transparent {
background-color: transparent;
}
}
a, a:hover {
text-decoration: none;
}
.nav-title {
float: left;
@media only screen and (min-width: $nav-breakpoint) {
display: inline-block;
margin: 0 3rem;
}
a.nav-title-logo img {
transition: all 0.25s ease;
float: left;
margin: 10px;
width: 40px;
height: 40px;
@media only screen and (min-width: $nav-breakpoint) {
margin-left: 0;
width: 80px;
height: 80px;
}
}
a.nav-title-text {
transition: all 0.25s ease;
display: inline-block;
padding: 14px 0 0 0;
font-size: 30px;
font-weight: lighter;
color: white;
@media only screen and (min-width: $nav-breakpoint) {
padding: 48px 0 0 0;
}
}
}
.nav-toggle {
float: right;
@media only screen and (min-width: $nav-breakpoint) {
display: none;
}
a {
line-height: $nav-height-mobile;
display: block;
padding: 0 1em;
color: white;
}
}
ul.nav-list {
display: none;
width: 100%;
@media only screen and (min-width: $nav-breakpoint) {
display: block;
width: auto;
float: right;
}
&.nav-revealed {
display: inline-block;
}
li {
display: block;
@media only screen and (min-width: $nav-breakpoint) {
display: inline-block;
}
}
li a {
transition: all 0.25s ease;
line-height: $nav-height-mobile;
display: block;
padding: 0 1em;
color: white;
border-top: 1px dotted #333;
@media only screen and (min-width: $nav-breakpoint) {
margin: 38px 0 0 0;
font-size: 17px;
text-transform: uppercase;
border: none;
}
}
}
}