-<header class="navbar navbar-light navbar-sticky-top navbar-expand-md bd-navbar">
+<header class="navbar navbar-dark navbar-sticky-top navbar-expand-md bd-navbar">
<div class="d-flex w-100 align-items-center justify-content-between d-md-none bd-navbar-brand-wrap">
<a class="navbar-brand" href="{{ site.baseurl }}/">
Bootstrap
</li>
</ul>
- <a class="btn btn-primary mb-3 mb-md-0 ml-md-3" href="{{ site.download.source }}">Download</a>
+ <a class="btn btn-outline-secondary mb-3 mb-md-0 ml-md-3" href="{{ site.download.source }}">Download</a>
</div>
</header>
//
.bd-navbar {
- // @include media-breakpoint-up(md) {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1030; // over everything in bootstrap
min-height: 4rem;
- // max-height: calc(100vh - 4rem);
- // overflow-y: auto;
- // }
- // padding-right: 0;
- // padding-left: 0;
- // margin-bottom: 2rem;
- background-color: #fff;
- background-clip: padding-box;
+ background-color: $bd-purple;
border-bottom: 1px solid rgba(0,0,0,.1);
box-shadow: 0 .5rem 1rem rgba(0,0,0,.05);
.navbar-nav {
.nav-link {
- color: $bd-graphite-light;
+ color: $bd-purple-light;
&.active,
- &:hover,
- &:focus {
- color: $gray-dark;
+ &:hover {
+ color: #fff;
background-color: transparent;
}
&.active {
font-weight: 500;
- color: darken($gray-dark, 15%);
}
}
}
font-size: .875rem;
}
- .navbar-brand {
- color: $bd-purple;
- }
+ // .navbar-brand {
+ // color: #fff;
+ // }
.bd-navbar-brand-wrap {
padding-top: .25rem;