Merge pull request #1102 from ripple/top_nav_2021

New top navigation
2025-11-04 11:55:50 +00:00 · 2021-06-23 16:27:37 -07:00
parent f6cb9d0814 372d8b7570
commit 74eda46eab
27 changed files with 800 additions and 291 deletions
--- a/assets/css/devportal2020.css
+++ b/assets/css/devportal2020.css
--- a/assets/img/icons/arrow-up-right.svg
+++ b/assets/img/icons/arrow-up-right.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.56299 17.343L17.4625 7.44352" stroke="#9A52FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.5625 7.44336L17.462 7.44336L17.462 17.3429" stroke="#9A52FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/img/icons/contribute.svg
+++ b/assets/img/icons/contribute.svg
@@ -0,0 +1,6 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3.03467" y="14.3295" width="37.4253" height="25.7931" fill="#E0E0E1"/>
+<rect x="3.03467" y="2.69727" width="37.4253" height="7.75479" fill="#E0E0E1"/>
+<path d="M44 10.3984V3.95312C44 1.82076 42.2652 0.0859375 40.1328 0.0859375H3.86719C1.73482 0.0859375 0 1.82076 0 3.95312V10.3984H44ZM29.7344 5.24219H37.4688C38.1807 5.24219 38.7578 5.81934 38.7578 6.53125C38.7578 7.24316 38.1807 7.82031 37.4688 7.82031H29.7344C29.0225 7.82031 28.4453 7.24316 28.4453 6.53125C28.4453 5.81934 29.0225 5.24219 29.7344 5.24219ZM16.8438 5.24219C17.5557 5.24219 18.1328 5.81934 18.1328 6.53125C18.1328 7.24316 17.5557 7.82031 16.8438 7.82031C16.1318 7.82031 15.5547 7.24316 15.5547 6.53125C15.5547 5.81934 16.1318 5.24219 16.8438 5.24219ZM11.6875 5.24219C12.3994 5.24219 12.9766 5.81934 12.9766 6.53125C12.9766 7.24316 12.3994 7.82031 11.6875 7.82031C10.9756 7.82031 10.3984 7.24316 10.3984 6.53125C10.3984 5.81934 10.9756 5.24219 11.6875 5.24219ZM6.53125 5.24219C7.24316 5.24219 7.82031 5.81934 7.82031 6.53125C7.82031 7.24316 7.24316 7.82031 6.53125 7.82031C5.81934 7.82031 5.24219 7.24316 5.24219 6.53125C5.24219 5.81934 5.81934 5.24219 6.53125 5.24219Z" fill="black"/>
+<path d="M0 12.9766V40.0469C0 42.1792 1.73482 43.9141 3.86719 43.9141H40.1328C42.2652 43.9141 44 42.1792 44 40.0469V12.9766H0ZM15.0709 31.3059C15.6269 31.7506 15.7169 32.5618 15.2722 33.1177C14.8276 33.6736 14.0162 33.7638 13.4604 33.319L7.01508 28.1628C6.37063 27.6474 6.3702 26.6654 7.01508 26.1496L13.4604 20.9933C14.0161 20.5486 14.8274 20.6387 15.2722 21.1946C15.7169 21.7505 15.6269 22.5618 15.0709 23.0064L9.88384 27.1562L15.0709 31.3059ZM27.052 18.6406L19.3176 36.6875C19.0372 37.3417 18.2796 37.6451 17.625 37.3645C16.9707 37.0841 16.6675 36.3262 16.948 35.6719L24.6824 17.625C24.9629 16.9707 25.7207 16.6676 26.375 16.948C27.0293 17.2284 27.3325 17.9862 27.052 18.6406ZM36.9849 28.1628L30.5396 33.3191C29.9846 33.7632 29.1732 33.6745 28.7278 33.1178C28.2831 32.5619 28.3731 31.7506 28.9291 31.306L34.1162 27.1562L28.9291 23.0066C28.3731 22.5619 28.2831 21.7507 28.7278 21.1948C29.1724 20.6388 29.9837 20.5487 30.5396 20.9935L36.9849 26.1498C37.6294 26.6651 37.6298 27.647 36.9849 28.1628Z" fill="black"/>
+</svg>
--- a/assets/img/icons/docs.svg
+++ b/assets/img/icons/docs.svg
@@ -0,0 +1,6 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.7578 11.6016L29.7344 9.02344L27.1562 0H9.10938C6.97357 0 5.24219 1.73138 5.24219 3.86719V40.1328C5.24219 42.2686 6.97357 44 9.10938 44H34.8906C37.0264 44 38.7578 42.2686 38.7578 40.1328V11.6016Z" fill="black"/>
+<path d="M38.7578 11.6016H29.7344C28.3164 11.6016 27.1562 10.4414 27.1562 9.02344V0C27.4914 0 27.8266 0.128906 28.0585 0.386805L38.371 10.6993C38.6289 10.9312 38.7578 11.2664 38.7578 11.6016Z" fill="#646467"/>
+<path opacity="0.9" d="M28.882 14.3516H31.6995L25.8275 19.8549C24.774 20.8082 23.4038 21.3361 21.983 21.3361C20.5622 21.3361 19.1921 20.8082 18.1386 19.8549L12.2666 14.3516H15.0841L19.5342 18.512C20.1987 19.1219 21.0679 19.4603 21.9699 19.4603C22.8719 19.4603 23.741 19.1219 24.4056 18.512L28.882 14.3516Z" fill="#F5F5F7"/>
+<path opacity="0.9" d="M15.0563 29.6237H12.2388L18.1371 24.094C19.1848 23.129 20.5571 22.5933 21.9815 22.5933C23.406 22.5933 24.7783 23.129 25.826 24.094L31.7243 29.6237H28.9068L24.4304 25.4106C23.7659 24.8007 22.8967 24.4623 21.9947 24.4623C21.0927 24.4623 20.2235 24.8007 19.559 25.4106L15.0563 29.6237Z" fill="#F5F5F7"/>
+</svg>
--- a/assets/js/jump-to-top.js
+++ b/assets/js/jump-to-top.js
@@ -13,4 +13,13 @@ $(document).ready(function() {
  $(".jump-to-top").click(function() {
    $("html").animate({scrollTop: TO_TOP_POS}, TO_TOP_SPEED)
  });
+
+  // TODO: put this somewhere better.
+  // Code to make other menu items hide on mobile when we expand one
+  $("#topnav-pages .dropdown").on("show.bs.dropdown", (evt) => {
+    $("#top-main-nav").addClass("submenu-expanded")
+  })
+  $("#topnav-pages .dropdown").on("hidden.bs.dropdown", (evt) => {
+    $("#top-main-nav").removeClass("submenu-expanded")
+  })
 });
--- a/content/concepts/introduction/intro-to-consensus.md
+++ b/content/concepts/introduction/intro-to-consensus.md
@@ -4,6 +4,7 @@ parent: introduction.html
 blurb: Develop a basic understanding of the XRP Ledger's consensus mechanism.
 labels:
  - Blockchain
+top_nav_grouping: Popular Pages
 ---
 # Introduction to Consensus

--- a/content/concepts/introduction/technical-faq.md
+++ b/content/concepts/introduction/technical-faq.md
@@ -4,6 +4,7 @@ parent: introduction.html
 blurb: Get answers to frequently asked questions, covering topics such as validators, unique node lists, the role of XRP, and security.
 labels:
  - Blockchain
+top_nav_grouping: Questions
 ---
 # Technical FAQ

--- a/content/concepts/payment-system-basics/accounts/reserves.md
+++ b/content/concepts/payment-system-basics/accounts/reserves.md
@@ -5,6 +5,7 @@ blurb: XRP Ledger accounts require a reserve of XRP to reduce spam in ledger dat
 labels:
  - Fees
  - Accounts
+top_nav_grouping: Popular Pages
 ---
 # Reserves

--- a/content/tutorials/get-started/get-started-using-http-websocket-apis.md
+++ b/content/tutorials/get-started/get-started-using-http-websocket-apis.md
@@ -3,6 +3,8 @@ html: get-started-using-http-websocket-apis.html
 parent: get-started.html
 blurb: Unleash the full power of the XRP Ledger's native APIs.
 cta_text: Get Started
+top_nav_name: HTTP / WebSocket
+top_nav_grouping: Get Started
 labels:
  - Development
 ---
--- a/content/tutorials/get-started/get-started-using-java.md
+++ b/content/tutorials/get-started/get-started-using-java.md
@@ -6,7 +6,7 @@ doc_type: Tutorials
 category: Get Started
 blurb: Build a simple Java app that interacts with the XRP Ledger.
 cta_text: Build an XRP Ledger-connected app
-top_nav_name: JavaScript
+top_nav_name: Java
 top_nav_grouping: Get Started
 filters:
  - include_code
--- a/content/tutorials/get-started/get-started-using-node-js.md
+++ b/content/tutorials/get-started/get-started-using-node-js.md
@@ -2,6 +2,8 @@
 html: get-started-using-node-js.html
 parent: get-started.html
 blurb: Build an entry-level JavaScript application for querying the XRP Ledger in Node.js.
+top_nav_name: JavaScript
+top_nav_grouping: Get Started
 labels:
  - Development
 ---
--- a/content/tutorials/get-started/get-started-using-python.md
+++ b/content/tutorials/get-started/get-started-using-python.md
@@ -3,6 +3,8 @@ html: get-started-using-python.html
 parent: get-started.html
 blurb: Build a simple Python app that interacts with the XRP Ledger.
 cta_text: Build an XRP Ledger-connected app
+top_nav_name: Python
+top_nav_grouping: Get Started
 filters:
  - include_code
 labels:
--- a/content/tutorials/get-started/send-xrp.md
+++ b/content/tutorials/get-started/send-xrp.md
@@ -10,6 +10,7 @@ filters:
 labels:
  - XRP
  - Payments
+top_nav_grouping: Popular Pages
 ---
 # Send XRP

--- a/content/tutorials/manage-the-rippled-server/configuration/run-rippled-as-a-validator.md
+++ b/content/tutorials/manage-the-rippled-server/configuration/run-rippled-as-a-validator.md
@@ -5,6 +5,7 @@ blurb: Have your server vote on the consensus ledger.
 labels:
  - Core Server
  - Blockchain
+top_nav_grouping: Popular Pages
 ---
 # Run rippled as a Validator

--- a/dactyl-config.yml
+++ b/dactyl-config.yml
@@ -48,7 +48,7 @@ cover_page:

 languages:
    -   code: en
-        display_name: Eng
+        display_name: English
        prefix: "/"
    -   code: ja
        display_name: 日本語
@@ -307,10 +307,21 @@ pages:
        sidebar: disabled
        top_nav_name: Docs
        top_nav_shortcuts:
+            # Programming Languages
            - get-started-using-python.html
            - get-started-using-node-js.html
            - get-started-using-java.html
            - get-started-using-http-websocket-apis.html
+            # Popular pages
+            - send-xrp.html
+            - reserves.html
+            - xrp-testnet-faucet.html
+            - run-rippled-as-a-validator.html
+            - intro-to-consensus.html
+            # Questions
+            - technical-faq.html
+        top_nav_hero_image: assets/img/icons/docs.svg
+        blurb: Dive into XRP Ledger technology and start integrating.
        targets:
            - en

@@ -326,6 +337,8 @@ pages:
            - get-started-using-node-js.html
            - get-started-using-java.html
            - get-started-using-http-websocket-apis.html
+        top_nav_hero_image: assets/img/icons/docs.svg
+        blurb: Dive into XRP Ledger technology and start integrating. #TODO: translate
        targets:
            - ja

@@ -3650,6 +3663,7 @@ pages:
        html: xrp-testnet-faucet.html
        parent: dev-tools.html
        template: page-xrp-faucets.html.jinja
+        top_nav_grouping: Popular Pages
        targets:
            - en
            - ja
@@ -3679,7 +3693,8 @@ pages:
        parent: index.html
        template: page-community.html.jinja
        sidebar: disabled
-        blurb: The XRP Ledger (XRPL) is a community-driven public blockchain ledger. Here’s how you can get involved.
+        blurb: Contribute to XRPL.org
+        top_nav_hero_image: assets/img/icons/contribute.svg
        targets:
            - en

@@ -3690,6 +3705,7 @@ pages:
        template: page-community.html.jinja
        sidebar: disabled
        blurb: The XRP Ledger (XRPL) is a community-driven public blockchain ledger. Here’s how you can get involved.
+        top_nav_hero_image: assets/img/icons/contribute.svg
        targets:
            - ja

@@ -3725,6 +3741,14 @@ pages:
            - en
            - ja

+    -   name: GitHub
+        html: https://github.com/ripple/xrpl-dev-portal/
+        parent: contribute.html
+        blurb: View and propose changes to this site's source code on GitHub.
+        targets:
+            - en
+            - ja
+
 # Redirects from deprecated "Explore" pages ------------------------------------
    -   name: Explore
        html: explore.html
--- a/styles/_colors.scss
+++ b/styles/_colors.scss
@@ -112,7 +112,7 @@ $text-muted:      $gray-200;
 $breadcrumb-bg:   $black;
 $breadcrumb-active-color: $gray-400;

-$dropdown-bg:     rgba(0,0,0,0.9);
+$dropdown-bg:     $gray-900;
 $dropdown-divider-bg: $black;
 $dropdown-border-color: $gray-900;
 $dropdown-color:  $secondary;
--- a/styles/_external-links.scss
+++ b/styles/_external-links.scss
@@ -1,10 +1,45 @@
+.external-link {
+  &::after {
+    content: "\00a0";
+    background-image: url(../img/icons/arrow-up-right.svg);
+    background-repeat: no-repeat;
+    display: inline-block;
+    background-size: 1em;
+    padding: 0 .5em;
+    background-position: left 0 bottom .2em;
+    transition: background-position 100ms ease-in-out;

-/* Reduce external link icon size */
-.fa.fa-external-link:before {
-  font-size: 80%;
+    // TODO: the background position is based on the padding, so it might
+    // need adjustments for elements with more padding to make it line up
+    // with the text. I thought background-origin: content-box might fix this
+    // but it doesn't seem to.
+  }
+
+  &:hover::after {
+    background-position: left .2em bottom .4em;
+  }
+
+  .fa-external-link {
+    display: none;
+  }
 }

-.external-link .fa-external-link,
-.related-projects a .fa-external-link {
-  padding-left: 3px;
+.top-nav .dropdown .external-link {
+  &::after {
+    background-position: left 0 bottom -.1em;
+  }
+
+  &:hover::after {
+    background-position: left .2em bottom .1em;
+  }
 }
+
+// /* Reduce external link icon size */
+// .fa.fa-external-link:before {
+//   font-size: 80%;
+// }
+//
+// .external-link .fa-external-link,
+// .related-projects a .fa-external-link {
+//   padding-left: 3px;
+// }
--- a/styles/_landings.scss
+++ b/styles/_landings.scss
@@ -219,5 +219,5 @@
  margin: 1.5rem 0;
  padding: 1rem;
  border: 2px solid $white;
-  background: $dropdown-bg;
+  background: $dark;
 }
--- a/styles/_lang-selector.scss
+++ b/styles/_lang-selector.scss
@@ -1,12 +0,0 @@
-/* Language selector (the one in the footer) -------------------------------- */
-
-.language-selector {
-  .nav-link {
-    font-size: 16px;
-  }
-
-  .nav-link.active {
-    color: $black;
-    font-weight: bold;
-  }
-}
--- a/styles/_layout.scss
+++ b/styles/_layout.scss
@@ -11,6 +11,10 @@ section {
  padding: 0;
 }

+#main_content_wrapper { // Push below fixed nav
+  margin-top: 80px;
+}
+
 // Normally-padded pages
 .padded-landing,
 .sidebar-primary #main_content_wrapper {
--- a/styles/_top-nav.scss
+++ b/styles/_top-nav.scss
@@ -1,90 +1,58 @@
 /* Top navigation ----------------------------------------------------------- */
 .top-nav {
-  margin: 20px 4px 0 4px;
+  background-color: $gray-900;
+  height: 80px;
+  padding: 0;

  // Logo
  .navbar-brand {
    text-decoration: none;
    white-space: pre;
-    -webkit-transition: opacity 200ms ease, color 200ms ease;
-    transition: opacity 200ms ease, color 200ms ease;
+    -webkit-transition: opacity .2s ease, color .2s ease;
+    transition: opacity .2s ease, color .2s ease;
+
+
+    .logo {
+      margin-left: 0;
+    }

    &:hover {
      opacity: 0.75;
    }

    @include media-breakpoint-down(md) {
+      padding-left: 2rem;
+
      img {
        width: 120px;
      }
    }
  }
-
-  // Fancy dropdown behavior ---------------------------------------------------
-  .top-nav-dropdown {
-    max-width: 840px;
+  .nav-item {
+    font-weight: 600;
  }

  // Main Links ----------------------------------------------------------------
-  .navbar-nav {
+  #topnav-pages {
+    @include media-breakpoint-up(lg) {
+      flex-grow: 1;
+    }
    .nav-link {
-      color: $white;
+      color: $gray-100;
      font-size: 1rem;
-      line-height: 52px;
+      line-height: 1.25rem;
      text-decoration: none;
-
-      &.active a {
-        font-weight: 700;
-        box-shadow: inset 0 -1px 0 0 #000;
-      }
-      &.active-parent a {
-        font-weight: 700;
-        box-shadow: inset 0 -1px 0 0 #000;
-      }
-
-      &:focus {
-        outline: none;
-      }
-
-      @include media-breakpoint-only(lg) {
-        padding: 1rem 1.15rem;
-
-        &.github-edit {
-          padding-left: 40px;
-        }
-      }
-    }
-    // Buttons in top nav
-    .btn-outline-secondary {
-      font-size: 14px;
-      line-height: 125%;
-      margin-top: 1rem;
-    }
-    @include media-breakpoint-down(md) {
-      .wrap-button {
-        padding: 1.5rem 0;
-
-        .btn {
-          display: inline;
-          padding: 1rem 1.25rem;
-        }
-      }
+      font-weight: 600;
+      // padding: .5rem 2rem;//TODO:checkme
    }
  }


  // Dropdowns -----------------------------------------------------------------
-  // (Mobile first)
+  // Shared styles
  .dropdown-toggle {
    position: relative;
  }
-  .dropdown-toggle::after {
-    position: absolute;
-    border-color: $gray-500 transparent transparent transparent;
-    border-width: 8px 5px 0 5px;
-    top: 40%;
-    left: auto;
-  }
  .dropdown.show {
    .dropdown-toggle {
      color: $gray-500;
@@ -93,78 +61,245 @@
  .dropdown-menu {
    border-width: 0;

+    h5 {
+      font-weight: 400;
+      font-size: 12px;
+      color: $gray-400;
+      margin-bottom: 0;
+    }
    .dropdown-item {
-      line-height: 262%;
-      padding: 0 .875rem;
+      line-height: 1rem;
+      padding: .75rem 0;
+      white-space: normal;

-      &.top-level-2 {
-        padding-left: 2rem
+      &.dropdown-hero {
+        width: 100%;
+        display: flex;
+        padding: 1rem 2rem;
+
+        > img {
+          width: 68px;
+          height: 68px;
+          background-color: $gray-800;
+          border-radius: $border-radius-sm;
+          flex-grow: 0;
+          padding: .75rem;
+          margin-right: 2rem;
+        }
+
+        p {
+          font-size: 14px;
+          color: $gray-300;
+          margin: 0;
+          white-space: normal;
+        }
+
+        &:hover {
+          h4 {
+            color: $blue-purple-400;
+          }
+          p {
+            font-weight: 400;
+          }
+        }
      }

-      &:hover {
-        color: $primary;
+      &:last-child {
+        padding-bottom: 0;
      }
+      &:first-child {
+        padding-top: 0;
+      }
+    }
+
+    .col-for-popular-pages,
+    .col-for-questions {
+      background-color: $gray-800;
+    }
+
+    a:hover {
+      color: $blue-purple-400;
+      background-color: inherit;
+    }
+
+    h5:hover {
+      background-color: inherit;
    }
  }
-  // Desktop version
+
+  // Desktop only styles -------------------------------------------------------
  @include media-breakpoint-up(lg) {
+    padding: 0 3rem;

-    .dropdown-toggle.with-caret::after {
-      position: relative;
-      top: 4px;
-      left: 0;
-      border-top: 8px solid $primary;
-      border-right: 5px solid transparent;
-      border-left: 5px solid transparent;
-      border-bottom: 0;
-      transition: 0.2s;
+    .navbar-brand {
+      margin-left: 0;
    }

-    .dropdown.show .dropdown-toggle.with-caret::after {
-      transform: scaleY(-1);
+    .dropdown-toggle {
+      &::after {
+        display: none;
+      }
+      > span {
+        border-bottom: 2px solid transparent;
+      }
    }

-    .dropdown.show .dropdown-toggle {
-      color: $gray-500;
-      position: relative;
+    .dropdown .dropdown-toggle:hover > span:not(.chevron) {
+      padding-bottom: 8px;
+      border-bottom: 2px solid $blue-purple-400;
+      margin-bottom: -8px;
    }

    .dropdown-menu {
-      border-width: 1px;
-      backdrop-filter: blur(8px);
-      border-radius: $border-radius-lg;
-      padding: 0.5rem 0.75rem;
-      min-width: 250px;
+      border-radius: 0 0 $border-radius-lg $border-radius-lg;
+      padding: 2.5rem;
+
+      .dropdown-hero {
+        padding: 0;
+      }
+
+      &.show {
+        display: grid;
+        gap: 40px;
+
+        &#topnav_dd_xrp-ledger-overviewhtml {
+          grid-template-columns: 180px 180px 180px;
+        }
+
+        &#topnav_dd_docshtml {
+          grid-template-columns: 180px 180px 260px;
+          left: -200px;
+        }
+
+        &#topnav_dd_contributehtml {
+          grid-template-columns: 200px;
+        }
+
+        .dropdown-hero {
+          grid-row: 1;
+          grid-column: 1 / 4;
+        }
+        #dropdown-hero-for-documentation {
+          grid-column: 1 / 3;
+        }
+
+        // "About" dropdown placement
+        .col-for-xrp-ledger {
+          grid-row: 1 / 3;
+          grid-column: 1;
+        }
+        .col-for-xrp {
+          grid-column: 2;
+        }
+        .col-for-sustainability {
+          grid-column: 2;
+        }
+        .col-for-about {
+          grid-row: 1;
+          grid-column: 3;
+        }
+
+        // "Docs" dropdown placement
+        .col-for-article-types {
+          grid-column: 1;
+          grid-row: 2;
+        }
+        .col-for-online-tools {
+          grid-column: 1;
+          grid-row: 3;
+        }
+        .col-for-get-started {
+          grid-column: 2;
+          grid-row: 2 / 4;
+        }
+        .col-for-popular-pages {
+          grid-column: 3;
+          grid-row: 1 / 3;
+          margin: -40px -40px -40px 0;
+          padding: 40px;
+        }
+        .col-for-questions {
+          grid-column: 3;
+          grid-row: 3;
+          margin:  0 -40px -40px 0px;
+          padding: 0  40px  40px  40px;
+        }
+      }

      &.smaller-dropdown {
-        min-width: unset;
-      }
-
-      .dropdown-item {
-        line-height: 44px;
+        min-width: 180px;
      }
    }
-  }
+
+    #topnav-pages {
+      flex-grow: 0;
+      @media (min-width: 992px) and (max-width: 1030px) {
+        // Fix for top nav overflow in this range
+        .nav-link {
+          padding: $nav-link-padding-y 1.6rem;//TODO:checkme
+        }
+      }
+    }
+
+    #topnav-language {
+      flex-grow: 0;
+
+      hr {
+        display: none;
+      }
+
+      #language_selector_header_btn {
+        padding-right: 0;
+      }
+    }
+
+    @include media-breakpoint-up(xl) {
+      #topnav-search {
+        margin-left: 4rem;
+        margin-right: .5rem;
+      }
+    }
+  } // End desktop styles

  // Search bar & controls -----------------------------------------------------
-  #navbar-search {
-    .navbar-form {
-      padding: 1rem;
+  #topnav-search {
+    flex-grow: 1;
+    .input-group {
+      flex-grow: 1;
    }

-    .input-group-text,
-    .input-group > .input-group-append > .btn {
-      color: $white;
-      background-color: transparent;
+    @include media-breakpoint-down(md) {
+      .form-inline {
+        padding: $nav-link-padding-y $nav-link-padding-x;
+      }
+    }
+
+
+    .input-group-text {
      border-width: 0;
+      color: $white;
+      background-color: $gray-800;
+      border-radius: $border-radius-sm 0 0 $border-radius-sm;
+      height: 40px;
+      padding: .5rem .5rem .5rem 1rem;
+      line-height: 1.5;
    }
    .algolia-autocomplete {
      flex-grow: 1;
    }

-    #topsearchbox:focus {
-      box-shadow: none;
-      border-color: $white;
+    #topsearchbox {
+      background-color: $gray-800;
+      border-radius: 0 $border-radius-sm $border-radius-sm 0;
+      padding: .75rem 1rem .75rem .5rem;
+      height: 40px;
+      width: 100%;
+      border: 1px solid $gray-800;
+
+      &:focus {
+        box-shadow: none;
+        border-color: $white;
+      }
    }

    // Algolia Search results --------------------------------------------------
@@ -212,34 +347,285 @@
    }
  }

-  // Mobile --------------------------------------------------------------------
+  // Mobile only styles --------------------------------------------------------
  @include media-breakpoint-down(md) {
    .navbar-brand {
      padding-left: 15px;
    }
    .navbar-toggler {
      border: 0;
-      padding: 0;
+      padding: 30px;
+      font-size: 1rem;
+      display: inline-block;
+
+      .navbar-toggler-icon {
+        background: none;
+        height: 20px;
+        width: 20px;
+        position: relative;
+
+        &::after,
+        &::before,
+        div {
+          position: absolute;
+          content: " ";
+          background-color: $gray-100;
+          display: block;
+          width: 100%;
+          height: 3px;
+          transition: all .2s ease;
+        }
+        &::before {
+          top: 0;
+        }
+        &::after {
+          bottom: 0;
+        }
+        div {
+          top: calc(50% - 1.5px);
+        }
+      }

      &:not(.collapsed) {
-        // Hack: turn white hamburger to approximately $green
-        filter: brightness(0.5) sepia(1) saturate(5000%) hue-rotate(114deg) brightness(1.96) saturate(87%);
+        .navbar-toggler-icon {
+          &::before {
+            transform: translateY(8px) rotate(135deg);
+          }
+          &::after {
+            transform: translateY(-9px) rotate(-135deg);
+          }
+          div {
+            transform: scale(0);
+          }
+        }
+      }
+    }
+
+    .navbar-nav .nav-link,
+    .navbar-collapse > .nav-item {
+      line-height: 150%;
+      background: $gray-900;
+
+      label {
+        margin-bottom: 0;
      }
    }

    .navbar-nav .nav-link {
-      line-height: 150%;
+      padding: $nav-link-padding-y $nav-link-padding-x;
    }

-    .github-edit-wrap .github-edit.nav-link {
-      background-image: unset;
-      padding-left: inherit;
+    .dropdown-menu {
+      margin: 0;
+      width: 100%;
+      overflow: auto;
+      transition: all .2s ease;
+      height: 0;
+      display: block;
+      padding: 0;
+      &.show {
+        // 80px = height of top nav element (with x)
+        // 52px = height of dropdown toggle (with <)
+        height: calc(100vh - 80px - 52px);
+
+        &#topnav_dd_docshtml {
+          display: grid;
+          grid-template-columns: 187px 187px;
+          gap: 1px;
+          left: -200px;
+
+          .dropdown-hero {
+            grid-column: 1 / 3;
+            grid-row: 1;
+          }
+
+          // "Docs" dropdown placement
+          .col-for-article-types {
+            grid-column: 1;
+            grid-row: 2;
+          }
+          .col-for-online-tools {
+            grid-column: 1;
+            grid-row: 3;
+            padding-bottom: 32px;
+          }
+          .col-for-get-started {
+            grid-column: 2;
+            grid-row: 2 / 4;
+            padding-bottom: 32px;
+          }
+          .col-for-popular-pages {
+            grid-column: 1 / 3;
+            grid-row: 4;
+            margin: -1px;
+            padding-top: 33px;
+          }
+          .col-for-questions {
+            grid-column: 1 / 3;
+            grid-row: 5;
+            margin: -1px;
+            padding-bottom: 32px;
+          }
+        }
+      }
+
+      .navcol {
+        padding: 1rem 2rem;
+      }
+      &.smaller-dropdown {
+        padding: 0 2rem;
+        &.show {
+          padding: 1rem 2rem;
+          height: auto;
+        }
+      }
+
+      .dropdown-hero:first-child {
+        padding-top: 1rem;
+      }
    }

+    .dropdown-toggle:not(.with-caret) {
+      &::before,
+      &::after {
+        border: 0;
+        font-family: FontAwesome;
+        color: $blue-purple-400;
+        font-size: .75rem;
+        transition: all .2s ease;
+        overflow: clip;
+        width: 1rem;
+      }
+
+      &::before {
+        content:"\f053"; // < chevron
+        display: inline-block;
+      }
+      &::after {
+        content:"\f054"; // > chevron
+        position: absolute;
+        right: 2rem;
+      }
+    }
+    .dropdown.show .dropdown-toggle::after {
+      text-indent: 1rem;
+    }
+    .dropdown:not(.show) .dropdown-toggle::before {
+      width: 0;
+      height: 0;
+      text-indent: -1rem;
+    }
+
+    .dropdown-toggle.with-caret {
+      &::after {
+        border: 0;
+      }
+    }
+
+    // Move search to top of mobile menu ---------------------------------------
+    #top-main-nav {
+      padding-top: 72px;
+      position: relative;
+      transition: padding-top .2s ease;
+
+      // Hide search and other sub-menus when one sub-menu is expanded
+      // (js required to add the class on the dropdown event)
+      &.submenu-expanded {
+        padding-top: 0;
+
+        .dropdown:not(.show) .dropdown-toggle {
+          display: none;
+        }
+
+        #topnav-search {
+          // display: none;
+          height: 0;
+          overflow: clip;
+          padding-top: 0;
+          padding-bottom: 0;
+        }
+      }
+    }
+    #topnav-search {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 72px;
+      transition: all .2s ease;
+    }
+
+    #topnav-language {
+      hr {
+        border-top: 1px solid $gray-800;
+        margin-top: 0.25rem;
+        margin-bottom: 0.25rem;
+        display: static;
+      }
+    }
+
+  } // end mobile specific styles ----------------------------------------------
+}
+
+
+// Fix so anchors don't jump under the fixed header ----------------------------
+.main h1:before,
+.main h2:before,
+.main h3:before,
+.main h4:before,
+.main h5:before,
+.main h6:before,
+#main_content_wrapper:before,
+.interactive-block:before {
+  display: block;
+  content: " ";
+  margin-top: -80px;
+  height: 80px;
+  visibility: hidden;
+}
+
+// Animated chevron (e.g. for language dropdown) -------------------------------
+
+.chevron {
+  position: relative;
+  display: inline-block;
+  width: .75rem;
+  height: .5625rem;
+
+  span {
+    position: absolute;
+    top: .25rem;
+    display: inline-block;
+    width: .5rem;
+    height: .15rem;
+    background-color: $blue-purple-400;
+    transition: all .2s ease;
+    border: none;
+
+    &:first-of-type {
+      left: 0;
+      transform: rotate(45deg);
+    }
+    &:last-of-type {
+      right: 0;
+      transform: rotate(-45deg);
+    }
  }

-  // Language toggle -----------------------------------------------------------
-  .language-selector {
-    font-size: 0.875rem;
+  &.active {
+    span:first-of-type {
+      transform: rotate(-45deg);
+    }
+    span:first-of-type {
+      transform: rotate(45deg);
+    }
+  }
+}
+
+.dropdown.show .chevron {
+  span:first-of-type {
+    transform: rotate(-45deg);
+  }
+  span:last-of-type {
+    transform: rotate(45deg);
  }
 }
--- a/styles/package.json
+++ b/styles/package.json
@@ -1,7 +1,7 @@
 {
  "devDependencies": {
    "bootstrap": "^4.5.0",
-    "node-sass": "^4.14.1"
+    "node-sass": "^6.0.0"
  },
  "scripts": {
    "build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2020.css --output-style compressed",
--- a/styles/xrpl.scss
+++ b/styles/xrpl.scss
@@ -4,14 +4,17 @@
@import "_font-face.scss";

 $navbar-padding-y: 0;
-$nav-link-padding-x: 1.25rem;
+$nav-link-padding-x: 2rem;
 $nav-link-padding-y: 1rem;
-$navbar-nav-link-padding-x: 1.25rem;
-$navbar-nav-link-padding-y: 1rem;
+$navbar-brand-padding-y: 1.25rem;
+$navbar-nav-link-padding-x: $nav-link-padding-x;
+$navbar-nav-link-padding-y: $nav-link-padding-y;
 $border-radius: 0;
 $border-radius-lg: 8px;
 $border-radius-sm: 4px;
 $dropdown-border-width: 1px;
+$enable-shadows: true;
+$dropdown-box-shadow: 0px 5px 40px $gray-900;
 $caret-width: .4em;

 $input-btn-padding-y: 1rem;
@@ -47,7 +50,6 @@ $font-family-sans-serif: -apple-system, system-ui, 'Roboto', sans-serif;
@import "_landings.scss";
@import "_interactive-tutorials.scss";
@import "_status-labels.scss";
-@import "_lang-selector.scss";
@import "_dev-tools.scss";
@import "_print.scss";
@import "_pages.scss";
--- a/styles/yarn.lock
+++ b/styles/yarn.lock
@@ -124,13 +124,6 @@ binary-extensions@^2.0.0:
  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==

-block-stream@*:
-  version "0.0.9"
-  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
-  integrity sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=
-  dependencies:
-    inherits "~2.0.0"
-
 bootstrap@^4.5.0:
  version "4.6.0"
  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.0.tgz#97b9f29ac98f98dfa43bf7468262d84392552fd7"
@@ -200,6 +193,11 @@ chalk@^1.1.1:
  optionalDependencies:
    fsevents "~2.3.1"

+chownr@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
+  integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
+
 cliui@^5.0.0:
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
@@ -248,13 +246,14 @@ core-util-is@1.0.2, core-util-is@~1.0.0:
  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=

-cross-spawn@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
-  integrity sha1-ElYDfsufDF9549bvE14wdwGEuYI=
+cross-spawn@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
  dependencies:
-    lru-cache "^4.0.1"
-    which "^1.2.9"
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"

 currently-unhandled@^0.4.1:
  version "0.4.1"
@@ -298,6 +297,11 @@ emoji-regex@^7.0.1:
  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==

+env-paths@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
+  integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==
+
 error-ex@^1.2.0:
  version "1.3.2"
  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -371,6 +375,13 @@ form-data@~2.3.2:
    combined-stream "^1.0.6"
    mime-types "^2.1.12"

+fs-minipass@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
+  integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
+  dependencies:
+    minipass "^3.0.0"
+
 fs.realpath@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -381,16 +392,6 @@ fsevents@~2.3.1:
  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==

-fstream@^1.0.0, fstream@^1.0.12:
-  version "1.0.12"
-  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.12.tgz#4e8ba8ee2d48be4f7d0de505455548eae5932045"
-  integrity sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==
-  dependencies:
-    graceful-fs "^4.1.2"
-    inherits "~2.0.0"
-    mkdirp ">=0.5 0"
-    rimraf "2"
-
 function-bind@^1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
@@ -441,7 +442,7 @@ glob-parent@~5.1.0:
  dependencies:
    is-glob "^4.0.1"

-glob@^7.0.0, glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@~7.1.1:
+glob@^7.0.0, glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@~7.1.1:
  version "7.1.7"
  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
@@ -462,7 +463,7 @@ globule@^1.0.0:
    lodash "~4.17.10"
    minimatch "~3.0.2"

-graceful-fs@^4.1.2:
+graceful-fs@^4.1.2, graceful-fs@^4.2.3:
  version "4.2.6"
  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
  integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
@@ -513,11 +514,6 @@ http-signature@~1.2.0:
    jsprim "^1.2.2"
    sshpk "^1.7.0"

-in-publish@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/in-publish/-/in-publish-2.0.1.tgz#948b1a535c8030561cea522f73f78f4be357e00c"
-  integrity sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ==
-
 indent-string@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
@@ -533,7 +529,7 @@ inflight@^1.0.4:
    once "^1.3.0"
    wrappy "1"

-inherits@2, inherits@~2.0.0, inherits@~2.0.3:
+inherits@2, inherits@~2.0.3:
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -683,13 +679,12 @@ loud-rejection@^1.0.0:
    currently-unhandled "^0.4.1"
    signal-exit "^3.0.0"

-lru-cache@^4.0.1:
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
-  integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
  dependencies:
-    pseudomap "^1.0.2"
-    yallist "^2.1.2"
+    yallist "^4.0.0"

 map-obj@^1.0.0, map-obj@^1.0.1:
  version "1.0.1"
@@ -736,63 +731,80 @@ minimist@^1.1.3, minimist@^1.2.5:
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==

-"mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1:
+minipass@^3.0.0:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.3.tgz#7d42ff1f39635482e15f9cdb53184deebd5815fd"
+  integrity sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==
+  dependencies:
+    yallist "^4.0.0"
+
+minizlib@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931"
+  integrity sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==
+  dependencies:
+    minipass "^3.0.0"
+    yallist "^4.0.0"
+
+mkdirp@^0.5.1:
  version "0.5.5"
  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
  dependencies:
    minimist "^1.2.5"

+mkdirp@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
+  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
+
 nan@^2.13.2:
  version "2.14.2"
  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
  integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==

-node-gyp@^3.8.0:
-  version "3.8.0"
-  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.8.0.tgz#540304261c330e80d0d5edce253a68cb3964218c"
-  integrity sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA==
+node-gyp@^7.1.0:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-7.1.2.tgz#21a810aebb187120251c3bcec979af1587b188ae"
+  integrity sha512-CbpcIo7C3eMu3dL1c3d0xw449fHIGALIJsRP4DDPHpyiW8vcriNY7ubh9TE4zEKfSxscY7PjeFnshE7h75ynjQ==
  dependencies:
-    fstream "^1.0.0"
-    glob "^7.0.3"
-    graceful-fs "^4.1.2"
-    mkdirp "^0.5.0"
-    nopt "2 || 3"
-    npmlog "0 || 1 || 2 || 3 || 4"
-    osenv "0"
-    request "^2.87.0"
-    rimraf "2"
-    semver "~5.3.0"
-    tar "^2.0.0"
-    which "1"
+    env-paths "^2.2.0"
+    glob "^7.1.4"
+    graceful-fs "^4.2.3"
+    nopt "^5.0.0"
+    npmlog "^4.1.2"
+    request "^2.88.2"
+    rimraf "^3.0.2"
+    semver "^7.3.2"
+    tar "^6.0.2"
+    which "^2.0.2"

-node-sass@^4.14.1:
-  version "4.14.1"
-  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.14.1.tgz#99c87ec2efb7047ed638fb4c9db7f3a42e2217b5"
-  integrity sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==
+node-sass@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-6.0.0.tgz#f30da3e858ad47bfd138bc0e0c6f924ed2f734af"
+  integrity sha512-GDzDmNgWNc9GNzTcSLTi6DU6mzSPupVJoStIi7cF3GjwSE9q1cVakbvAAVSt59vzUjV9JJoSZFKoo9krbjKd2g==
  dependencies:
    async-foreach "^0.1.3"
    chalk "^1.1.1"
-    cross-spawn "^3.0.0"
+    cross-spawn "^7.0.3"
    gaze "^1.0.0"
    get-stdin "^4.0.1"
    glob "^7.0.3"
-    in-publish "^2.0.0"
    lodash "^4.17.15"
    meow "^3.7.0"
    mkdirp "^0.5.1"
    nan "^2.13.2"
-    node-gyp "^3.8.0"
+    node-gyp "^7.1.0"
    npmlog "^4.0.0"
    request "^2.88.0"
    sass-graph "2.2.5"
    stdout-stream "^1.4.0"
    "true-case-path" "^1.0.2"

-"nopt@2 || 3":
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
-  integrity sha1-xkZdvwirzU2zWTF/eaxopkayj/k=
+nopt@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88"
+  integrity sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==
  dependencies:
    abbrev "1"

@@ -811,7 +823,7 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==

-"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0:
+npmlog@^4.0.0, npmlog@^4.1.2:
  version "4.1.2"
  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
  integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
@@ -843,24 +855,6 @@ once@^1.3.0:
  dependencies:
    wrappy "1"

-os-homedir@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
-  integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
-
-os-tmpdir@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
-  integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
-
-osenv@0:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
-  integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==
-  dependencies:
-    os-homedir "^1.0.0"
-    os-tmpdir "^1.0.0"
-
 p-limit@^2.0.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
@@ -904,6 +898,11 @@ path-is-absolute@^1.0.0:
  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=

+path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
 path-parse@^1.0.6:
  version "1.0.6"
  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
@@ -950,11 +949,6 @@ process-nextick-args@~2.0.0:
  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==

-pseudomap@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
-  integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
-
 psl@^1.1.28:
  version "1.8.0"
  resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
@@ -1022,7 +1016,7 @@ repeating@^2.0.0:
  dependencies:
    is-finite "^1.0.0"

-request@^2.87.0, request@^2.88.0:
+request@^2.88.0, request@^2.88.2:
  version "2.88.2"
  resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
  integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
@@ -1066,10 +1060,10 @@ resolve@^1.10.0:
    is-core-module "^2.2.0"
    path-parse "^1.0.6"

-rimraf@2:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
-  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
  dependencies:
    glob "^7.1.3"

@@ -1118,16 +1112,30 @@ scss-tokenizer@^0.2.3:
  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==

-semver@~5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
-  integrity sha1-myzl094C0XxgEq0yaqa00M9U+U8=
+semver@^7.3.2:
+  version "7.3.5"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
+  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
+  dependencies:
+    lru-cache "^6.0.0"

 set-blocking@^2.0.0, set-blocking@~2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=

+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
 signal-exit@^3.0.0:
  version "3.0.3"
  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -1261,14 +1269,17 @@ supports-color@^2.0.0:
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=

-tar@^2.0.0:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.2.tgz#0ca8848562c7299b8b446ff6a4d60cdbb23edc40"
-  integrity sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==
+tar@^6.0.2:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.0.tgz#d1724e9bcc04b977b18d5c573b333a2207229a83"
+  integrity sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==
  dependencies:
-    block-stream "*"
-    fstream "^1.0.12"
-    inherits "2"
+    chownr "^2.0.0"
+    fs-minipass "^2.0.0"
+    minipass "^3.0.0"
+    minizlib "^2.1.1"
+    mkdirp "^1.0.3"
+    yallist "^4.0.0"

 to-regex-range@^5.0.1:
  version "5.0.1"
@@ -1348,10 +1359,10 @@ which-module@^2.0.0:
  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
  integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=

-which@1, which@^1.2.9:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
-  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
+which@^2.0.1, which@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
  dependencies:
    isexe "^2.0.0"

@@ -1381,10 +1392,10 @@ y18n@^4.0.0:
  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"
  integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==

-yallist@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
-  integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==

 yargs-parser@^13.1.2:
  version "13.1.2"
--- a/template/component-github-edit.html.jinja
+++ b/template/component-github-edit.html.jinja
@@ -23,6 +23,6 @@
    {% if not have_edit_link %}
      {% set githuburl = target.github_forkurl %}
    {% endif %}
-    <a href="{{githuburl}}" target="_blank" class="nav-link github-edit">{% trans %}Edit{% endtrans %}</a>
+    <a href="{{githuburl}}" target="_blank" class="nav-link github-edit">{% trans %}Edit page{% endtrans %}</a>
  {% endif %}
 </div><!-- /.github-edit -->
--- a/template/component-top-nav.html.jinja
+++ b/template/component-top-nav.html.jinja
@@ -1,30 +1,55 @@
-<div class="container-fluid">
-<nav class="top-nav navbar navbar-expand-lg navbar-dark row">
-  <a href="{% if target.prefix %}{{target.prefix}}{% else %}/{% endif %}" class="navbar-brand"><img src="{{currentpage.prefix}}assets/img/XRPLedger_DevPortal-white.svg" class="logo"  height="44" alt="{{target.display_name}}" /></a>
-  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarHolder" aria-controls="navbarHolder" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
+<nav class="top-nav navbar navbar-expand-lg navbar-dark fixed-top">
+  <a href="{% if target.prefix %}{{target.prefix}}{% else %}/{% endif %}" class="navbar-brand"><img src="{{currentpage.prefix}}assets/img/XRPLedger_DevPortal-white.svg" class="logo"  height="40" alt="{{target.display_name}}" /></a>
+  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#top-main-nav" aria-controls="navbarHolder" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"><div></div></span>
  </button>
-  <div class="collapse navbar-collapse justify-content-center" id="navbarHolder">
-    <ul class="nav navbar-nav">
+  <div class="collapse navbar-collapse justify-content-between" id="top-main-nav">
+    <ul class="nav navbar-nav" id="topnav-pages">
      {% macro dropdown(top_page) %}
      {% set printed_groupings = [] %}
      {% if top_page.children|selectattr('top_nav_omit', 'undefined_or_ne', True)|list|length %}
      <li class="nav-item dropdown">
-        <a class="nav-link dropdown-toggle" href="#" id="topnav_{{top_page.html}}" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% if top_page.top_nav_name is defined %}{{top_page.top_nav_name}}{% else %}{{top_page.name}}{% endif %}</a>
-        <div class="top-nav-dropdown dropdown-menu" aria-labelledby="topnav_{{top_page.html}}"><div class="row">
-          <!-- TODO: link for the parent page here, handle non -->
-          {% for link in top_page.children if not link.top_nav_omit %}
-          {% if link.top_nav_grouping is defined and link.top_nav_grouping not in printed_groupings %}
-          <h5>{{link.top_nav_grouping}}</h5>
-          {% set _ = printed_groupings.append(link.top_nav_grouping) %}
+        <a class="nav-link dropdown-toggle" href="#" id="topnav_{{slug(top_page.html)}}" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span>{% if top_page.top_nav_name is defined %}{{top_page.top_nav_name}}{% else %}{{top_page.name}}{% endif %}</span></a>
+        <div class="dropdown-menu" aria-labelledby="topnav_{{slug(top_page.html)}}" id="topnav_dd_{{slug(top_page.html)}}">
+          {% if top_page.top_nav_hero_image is defined %}
+          <a class="dropdown-item dropdown-hero" id="dropdown-hero-for-{{slug(top_page.name)}}" href="{{top_page.html}}">
+            <img src="{{top_page.top_nav_hero_image}}" alt="{{top_page.name}} icon" />
+            <div class="dropdown-hero-text">
+              <h4>{{top_page.name}}</h4>
+              <p>{{top_page.blurb}}</p>
+            </div>
+          </a>
+          {% else %}
+          <div class="navcol col-for-{{slug(top_page.top_nav_grouping)}}">
+            <h5 class="dropdown-item">{{top_page.top_nav_grouping}}</h5>
+            {% set _ = printed_groupings.append(top_page.top_nav_grouping) %}
+            <a class="dropdown-item {% if currentpage == top_page %} active{% endif %}" href="{{top_page.html}}">{{top_page.name}}</a>
          {% endif %}
-          <a class="dropdown-item {% if currentpage == link %} active{% endif %}" href="{{link.html}}">{% if link.top_nav_name is defined %}{{link.top_nav_name}}{% else %}{{link.name}}{% endif %}</a>
+          {% set dropdownchildren = top_page.children|list %}
+          {% for linkhtml in top_page.top_nav_shortcuts %}
+            {% set _ = dropdownchildren.append(pages|selectattr("html", "defined_and_equalto", linkhtml)|first) %}
          {% endfor %}
-        </div></div>
+          {% for link in dropdownchildren if not link.top_nav_omit %}
+            {% if link.top_nav_grouping not in printed_groupings %}
+            {% if printed_groupings %}
+          </div><!--./col-->
+            {% endif %}
+            {% if link.top_nav_grouping is defined %}
+          <div class="navcol col-for-{{slug(link.top_nav_grouping)}}">
+            <h5 class="dropdown-item">{{link.top_nav_grouping}}</h5>
+            {% else %}
+          <div class="navcol col-for-ungrouped">
+            {% endif %}
+            {% set _ = printed_groupings.append(link.top_nav_grouping) %}
+            {% endif %}
+            <a class="dropdown-item{% if currentpage == link %} active{% endif %}{% if "//" in link.html %} external-link{% endif %}" href="{{link.html}}">{% if link.top_nav_name is defined %}{{link.top_nav_name}}{% else %}{{link.name}}{% endif %}</a>
+          {% endfor %}
+          </div><!--./col-->
+        </div><!--/.dropdown-menu-->
      </li>
      {% elif not top_page.top_nav_omit %}
      <li class="nav-item">
-	        <a class="nav-link" href="{{top_page.html}}">{{top_page.name}}</a>
+	        <a class="nav-link{% if "//" in link.html %} external-link{% endif %}" href="{{top_page.html}}"><span>{{top_page.name}}</span></a>
      </li>
      {% endif %}
      {% endmacro %}
@@ -32,38 +57,35 @@
      {% for page in (pages|first).children %}
      {{ dropdown(page) }}
      {% endfor %}
-
-      {% include 'component-github-edit.html.jinja' %}
-
-      <li class="nav-item" id="navbar-search">
-        <form class="navbar-form navbar-right" role="search">
-          <div class="form-inline">
-            <div class="input-group">
-              <label class="input-group-prepend" for="topsearchbar"><i class="fa fa-search input-group-text"></i><span class="sr-only">{% trans %}Search site...{% endtrans %}</span></label>
-              <input id="topsearchbox" name="q" type="text" class="form-control" placeholder="{% trans %}Search site...{% endtrans %}">
-              <div class="input-group-append d-none d-lg-flex">
-                <button type="button" class="btn btn-default" data-toggle="dropdown" data-target="topnav-search-dropdown-toggle"><i class="fa fa-times"></i><span class="sr-only">{% trans %}Close Search{% endtrans %}</span></button>
-              </div>
-            </div><!--/.input-group-->
-          </div>
-        </form>
-      </li><!--/#navbar-search-->
-
-
    </ul><!-- /.navbar-nav -->

-    <div class="nav navbar-nav language-selector">
+    <div class="nav-item" id="topnav-search">
+      <form class="navbar-form navbar-right" role="search">
+        <div class="form-inline">
+          <div class="input-group">
+            <label class="input-group-prepend" for="topsearchbox"><i class="fa fa-search input-group-text"></i><span class="sr-only">{% trans %}Search{% endtrans %}</span></label>
+            <input id="topsearchbox" name="q" type="text" class="form-control" placeholder="{% trans %}Search site...{% endtrans %}">
+          </div><!--/.input-group-->
+        </div>
+      </form>
+    </div><!--/#topnav-search-->
+
+    <div class="nav-item" id="topnav-language">
      <div class="dropdown">
        <a class="nav-link dropdown-toggle with-caret" id="language_selector_header_btn" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          {{(config.languages|selectattr('code', 'eq', target.lang)|first).display_name}}
+          <span class="chevron"><span></span><span></span></span>
        </a>
        <div class="dropdown-menu smaller-dropdown" aria-labelledby="language_selector_header_btn">
-          {% for lang in config.languages %}
-          <a class="dropdown-item" href="{{lang.prefix}}{{currentpage.html}}">{{lang.display_name}}</a>
+          <hr />
+          {% for lang in config.languages if lang.code != target.lang %}
+          <a class="dropdown-item" href="{{lang.prefix}}{{currentpage.html}}">
+            {{lang.display_name}}
+          </a>
+          <hr />
          {% endfor %}
        </div><!--/.dropdown-menu-->
      </div><!--/.dropdown-->
    </div><!--/.language-selector-->
-  </div><!--/#navbarHolder-->
+  </div><!--/#top-main-nav-->
 </nav>
-</div>
--- a/template/pagetype-doc.html.jinja
+++ b/template/pagetype-doc.html.jinja
@@ -30,6 +30,7 @@
 {% endblock %}

 {% block right_sidebar %}
+  {% include 'component-github-edit.html.jinja' %}
  <div id="page-toc-wrapper">
    {% include 'component-label-list.html.jinja' %}
    <div class="toc-header">