101 lines
2.5 KiB
SCSS
Executable File
101 lines
2.5 KiB
SCSS
Executable File
// Styling for the navbar
|
|
#mainNav {
|
|
position: absolute;
|
|
border-bottom: 1px solid $gray-lighter;
|
|
background-color: white;
|
|
@include sans-serif-font;
|
|
.navbar-brand {
|
|
font-weight: 800;
|
|
color: $gray-light;
|
|
}
|
|
.navbar-toggler {
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
padding: 13px;
|
|
text-transform: uppercase;
|
|
color: $gray-light;
|
|
}
|
|
.navbar-nav {
|
|
> li.nav-item {
|
|
> a {
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
}
|
|
@media only screen and (min-width: 992px) {
|
|
border-bottom: 1px solid transparent;
|
|
background: transparent;
|
|
.navbar-brand {
|
|
padding: 15px 20px;
|
|
color: white;
|
|
&:focus,
|
|
&:hover {
|
|
color: fade-out(white, .2);
|
|
}
|
|
}
|
|
.navbar-nav {
|
|
> li.nav-item {
|
|
> a {
|
|
padding: 15px 20px;
|
|
color: white;
|
|
&:focus,
|
|
&:hover {
|
|
color: fade-out(white, .2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1170px) {
|
|
-webkit-transition: background-color 0.2s;
|
|
-moz-transition: background-color 0.2s;
|
|
transition: background-color 0.2s;
|
|
/* Force Hardware Acceleration in WebKit */
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
-moz-transform: translate3d(0, 0, 0);
|
|
-ms-transform: translate3d(0, 0, 0);
|
|
-o-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
-webkit-backface-visibility: hidden;
|
|
&.is-fixed {
|
|
/* when the user scrolls down, we hide the header right above the viewport */
|
|
position: fixed;
|
|
top: -77px;
|
|
-webkit-transition: -webkit-transform 0.2s;
|
|
-moz-transition: -moz-transform 0.2s;
|
|
transition: transform 0.2s;
|
|
border-bottom: 1px solid darken(white, .05);
|
|
background-color: fade-out(white, .1);
|
|
.navbar-brand {
|
|
color: $gray-dark;
|
|
&:focus,
|
|
&:hover {
|
|
color: $theme-primary;
|
|
}
|
|
}
|
|
.navbar-nav {
|
|
> li.nav-item {
|
|
> a {
|
|
color: $gray-dark;
|
|
&:focus,
|
|
&:hover {
|
|
color: $theme-primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.is-visible {
|
|
/* if the user changes the scrolling direction, we show the header */
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
-moz-transform: translate3d(0, 100%, 0);
|
|
-ms-transform: translate3d(0, 100%, 0);
|
|
-o-transform: translate3d(0, 100%, 0);
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
}
|
|
}
|