new on-page sub menu

_src/_assets/styles/_page-getstarted.scss

@@ -418,32 +418,3 @@
         opacity: .8;
     }
 }
-
-//
-// Sticky sub menu
-//
-body {
-    position: relative;
-}
-
-.sticky {
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: 2;
-
-    @supports (position: sticky) {
-        position: sticky;
-    }
-
-    .menu__link {
-        @media ($screen-sm) {
-            padding-top: $spacer;
-            padding-bottom: $spacer;
-
-            &:after {
-                bottom: $spacer / 2;
-            }
-        }
-    }
-}

_src/_assets/styles/_page-usecases.scss

@@ -137,7 +137,6 @@
     }
 }
 
-
 //
 // Single use case page
 //

_src/_assets/styles/bigchain/_menus.scss

@@ -116,7 +116,6 @@
     }
 }
 
-
 //
 // Main menu overlaying a dark background image
 // in front page hero or page headers
@@ -220,7 +219,6 @@
     }
 }
 
-
 .footer__copyright {
     border-top: 1px solid $brand-main-gray;
     text-align: center;
@@ -256,7 +254,6 @@
     }
 }
 
-
 //
 // ERDF logo
 //
@@ -289,13 +286,18 @@
     display: inline-block;
 }
 
+//
+// On-page sub menu
+//
 .menu--sub {
     @include transition;
-    background: rgba(lighten($gray, 30%), .85);
+    transform: translate3d(0, 0, 0);
-    backdrop-filter: saturate(200%) blur(10px);
+    background: lighten($gray, 30%);
 
-    a {
+    .menu__link {
         color: $gray-dark;
+        margin-left: $spacer;
+        margin-right: $spacer;
 
         &:after {
             background: darken($gray-dark, 10%);
@@ -316,7 +318,72 @@
         vertical-align: baseline;
         margin-right: $spacer / 6;
         margin-bottom: -2px;
-        stroke-width: 3px;
+        stroke-width: 4px; // that's weird
         color: $gray;
+        stroke: $gray-dark;
+    }
+
+    .number {
+        text-align: center;
+        display: inline-block;
+        width: 1rem;
+        height: 1rem;
+        border-radius: 50%;
+        font-size: $font-size-xs;
+        vertical-align: .1rem;
+        background: $gray;
+        color: $gray-light;
+        font-weight: $font-weight-bold;
+        line-height: 1rem;
+        margin-right: .2rem;
+        margin-left: -1.2rem;
+    }
+
+    &.sticky {
+        background: rgba(lighten($gray, 30%), .85);
+        backdrop-filter: saturate(200%) blur(10px);
+        box-shadow: 0 2px 6px rgba($gray-dark, .4);
+
+        // fake less padding and smaller menu bar
+        // for performant and smoooth transition
+        transform: translate3d(0, -2rem, 0);
+
+        .menu__link {
+            @media ($screen-sm) {
+                transform: scale(.85) translate3d(0, .6rem, 0);
+                transform-origin: bottom;
+            }
+
+            &.active {
+                color: $headings-color;
+
+                .number {
+                    background: $headings-color;
+                    color: $gray;
+                }
+
+                &:after {
+                    background: $headings-color;
+                }
+            }
+        }
+    }
+}
+
+//
+// Sticky sub menu
+//
+body {
+    position: relative;
+}
+
+.sticky {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 2;
+
+    @supports (position: sticky) {
+        position: sticky;
     }
 }

_src/getstarted.html

@@ -69,10 +69,10 @@ redirect_from:
 <nav class="menu--sub" data-gumshoe-header>
     <div class="row row--wide">
         <div class="menu-overflow" data-gumshoe>
-            <a class="menu__link scroll" href="#server">{{ content.server.title }}</a>
+            <a class="menu__link scroll" href="#server"><span class="number">1</span> {{ content.server.title }}</a>
-            <a class="menu__link scroll" href="#drivers">{{ content.drivers.title }}</a>
+            <a class="menu__link scroll" href="#drivers"><span class="number">2</span> {{ content.drivers.title }}</a>
-            <a class="menu__link scroll" href="#docs">{{ content.docs.title }}</a>
+            <a class="menu__link scroll" href="#docs"><span class="number">3</span> {{ content.docs.title }}</a>
-            <a class="menu__link scroll" href="#community">{{ content.community.title }}</a>
+            <a class="menu__link scroll" href="#community"><span class="number">4</span> {{ content.community.title }}</a>
         </div>
     </div>
 </nav>
@@ -88,7 +88,7 @@ redirect_from:
 <section class="section section--server background--darker" id="server">
     <div class="row row--wide">
         <header class="section-header text-left">
-            <h1 class="section-title section-title--numbered"><span>1</span> {{ content.server.title }}</h1>
+            <h1 class="section-title section-title--numbered"><span class="number">1</span> {{ content.server.title }}</h1>
             <p class="section-description">{{ content.server.description }}</p>
         </header>
     </div>