Docs navbar tweaks (#29948)

diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index 7df57a31e4d55c5a7a0c56544e694425354840c5..c8e1a2d309aca918a87f5c5626324d652539c76f 100644 (file)
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -1,16 +1,15 @@
 .bd-navbar {
-  min-height: 4rem;
+  padding: .625rem 0;
   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;
+        padding: .5rem 0;
+        margin: -.5rem 0;
         overflow-x: auto;
         white-space: nowrap;
         -webkit-overflow-scrolling: touch;
@@ -22,7 +21,6 @@
     .nav-link {
       color: rgba($white, .85);
 
-      &.active,
       &:hover,
       &:focus {
         color: $white;
@@ -30,6 +28,7 @@
 
       &.active {
         font-weight: 600;
+        color: $white;
       }
     }
   }

diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index 637341c69581526fc19f5d89164689416dae2556..3b07cba9d13d0c1d6a72b137542ef6835a1d6ec1 100644 (file)
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -1,6 +1,6 @@
-<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar px-0">
-  <div class="container-xl flex-wrap flex-md-nowrap py-0 px-3">
-    <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
+<header class="navbar navbar-expand navbar-dark bd-navbar">
+  <div class="container-xl flex-wrap flex-md-nowrap">
+    <a class="navbar-brand mr-2" href="/" aria-label="Bootstrap">
       {{ partial "icons/bootstrap-logo-solid.svg" (dict "class" "d-block" "width" "32" "height" "32") }}
     </a>