- _navbar.scss for all main navbar code
- new _subnav.scss to move all subnav styles into
--- /dev/null
+.bd-navbar {
+ min-height: 4rem;
+ background-color: $bd-purple-bright;
+
+ @include media-breakpoint-down(md) {
+ .navbar-nav-scroll {
+ width: 100%;
+ height: 2.5rem;
+ margin-top: .25rem;
+ overflow: hidden;
+
+ .navbar-nav {
+ padding-bottom: 2rem;
+ overflow-x: auto;
+ white-space: nowrap;
+ -webkit-overflow-scrolling: touch;
+ }
+ }
+ }
+
+ .navbar-nav {
+ .nav-link {
+ padding-right: .5rem;
+ padding-left: .5rem;
+ color: $bd-purple-light;
+
+ &.active,
+ &:hover,
+ &:focus {
+ color: $white;
+ background-color: transparent;
+ }
+
+ &.active {
+ font-weight: 600;
+ }
+ }
+ }
+
+ .navbar-nav-svg {
+ display: inline-block;
+ width: 1rem;
+ height: 1rem;
+ vertical-align: text-top;
+ }
+}
-//
-// Main navbar
-//
-
.bd-subnavbar {
background-color: rgba(#fff, .75);
backdrop-filter: blur(1rem);
text-decoration: none;
}
}
-
-.bd-navbar {
- min-height: 4rem;
- background-color: $bd-purple-bright;
-
- @include media-breakpoint-down(md) {
- .navbar-nav-scroll {
- width: 100%;
- height: 2.5rem;
- margin-top: .25rem;
- overflow: hidden;
-
- .navbar-nav {
- padding-bottom: 2rem;
- overflow-x: auto;
- white-space: nowrap;
- -webkit-overflow-scrolling: touch;
- }
- }
- }
-
- .navbar-nav {
- .nav-link {
- padding-right: .5rem;
- padding-left: .5rem;
- color: $bd-purple-light;
-
- &.active,
- &:hover,
- &:focus {
- color: $white;
- background-color: transparent;
- }
-
- &.active {
- font-weight: 600;
- }
- }
- }
-
- .navbar-nav-svg {
- display: inline-block;
- width: 1rem;
- height: 1rem;
- vertical-align: text-top;
- }
-}
// Load docs components
@import "variables";
-@import "nav";
+@import "navbar";
+@import "subnav";
@import "masthead";
@import "ads";
@import "content";