nunta/scss/_navbar.scss
David Miller 7db1bc641a big code cleanup
rename lib to vendor, remove deprecated LESS version, revise
package.json, load jQuery easing through npm, restructure SCSS
directory into modules, expanded code commenting and documentation
theme-wide
2017-03-31 17:05:07 -04:00

76 lines
1.9 KiB
SCSS

// Styling for the navbar
#mainNav {
background-color: $gray-darker;
.navbar-toggler {
border: 0;
color: white;
background-color: $theme-primary;
font-size: 12px;
text-transform: uppercase;
@include heading-font;
padding: 13px;
right: 0;
}
.container {
padding: 0;
.navbar-brand {
color: $theme-primary;
@include script-font;
&:hover,
&:focus,
&:active,
&.active {
color: darken($theme-primary, 10%);
}
}
.navbar-nav {
.nav-item {
.nav-link {
font-size: 90%;
padding: 0.75em 0;
@include heading-font;
font-weight: 400;
letter-spacing: 1px;
color: white;
&:hover,
&.active {
color: $theme-primary;
}
}
}
}
}
}
@media(min-width:992px) {
#mainNav {
background-color: transparent;
padding: 25px 0;
-webkit-transition: padding 0.3s;
-moz-transition: padding 0.3s;
transition: padding 0.3s;
border: none;
.navbar-brand {
font-size: 1.75em;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.navbar-nav {
.nav-item {
.nav-link {
padding: 1.1em 1em !important;
}
}
}
&.navbar-shrink {
background-color: $gray-darker;
padding: 0;
.navbar-brand {
padding: 12px 0;
font-size: 1.25em;
}
}
}
}