68 lines
1.3 KiB
SCSS
68 lines
1.3 KiB
SCSS
// Styling for the navbar
|
|
#mainNav {
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
@include heading-font;
|
|
.navbar-brand {
|
|
color: $white;
|
|
}
|
|
.navbar-nav {
|
|
margin-top: 1rem;
|
|
letter-spacing: 0.0625rem;
|
|
li.nav-item {
|
|
a.nav-link {
|
|
color: $white;
|
|
&:hover {
|
|
color: $primary;
|
|
}
|
|
&:active,
|
|
&:focus {
|
|
color: $white;
|
|
}
|
|
&.active {
|
|
color: $primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.navbar-toggler {
|
|
font-size: 80%;
|
|
padding: 0.8rem;
|
|
}
|
|
}
|
|
@media(min-width:992px) {
|
|
#mainNav {
|
|
padding-top: 1.5rem;
|
|
padding-bottom: 1.5rem;
|
|
-webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
|
|
-moz-transition: padding-top 0.3s, padding-bottom 0.3s;
|
|
transition: padding-top 0.3s, padding-bottom 0.3s;
|
|
.navbar-brand {
|
|
font-size: 2em;
|
|
-webkit-transition: font-size 0.3s;
|
|
-moz-transition: font-size 0.3s;
|
|
transition: font-size 0.3s;
|
|
}
|
|
.navbar-nav {
|
|
margin-top: 0;
|
|
}
|
|
.navbar-nav > li.nav-item > a.nav-link.active {
|
|
color: $white;
|
|
background: $primary;
|
|
&:active,
|
|
&:focus,
|
|
&:hover {
|
|
color: $white;
|
|
background: $primary;
|
|
}
|
|
}
|
|
}
|
|
#mainNav.navbar-shrink {
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
.navbar-brand {
|
|
font-size: 1.5em;
|
|
}
|
|
}
|
|
}
|