diff --git a/assets/css/devportal.css b/assets/css/devportal.css
index b12be992a1..d6f3c3f8e6 100644
--- a/assets/css/devportal.css
+++ b/assets/css/devportal.css
@@ -18,7 +18,10 @@ th {
 
 .navbar.fixed-top {
   font-weight: 400;
-  border-bottom: 1px solid #C9CDD1;
+  /* border-bottom: 1px solid #C9CDD1; */
+  box-shadow: inset 0 -1px 0 0 #eae7e6;
+  padding: 0;
+  margin: 0 48px;
 }
 
 .navbar-brand {
@@ -37,24 +40,31 @@ th {
 }
 
 .navbar .navbar-nav .nav-link {
-  font-size: 20px;
-  line-height: 38px;
+  font-size: 14px;
+  line-height: 52px;
   text-decoration: none;
   transition: 0.5s;
+  font-family: 'Space Mono', sans-serif;
 }
 .navbar .navbar-nav .nav-link:hover {
-  color: #27a2db;
+  /* color: #27a2db; */
+  background-color: transparent;
+  box-shadow: inset 0 -1px 0 0 #1b1818;
+  color: #1b1818;
+  text-decoration: none;
 }
 
 .navbar .navbar-nav .active a {
   font-weight: 700;
-  color: #3B4147;
-  background-color: #E1E5E8;
-
+  /* background-color: #E1E5E8; */
+  color: #1b1818;
+  box-shadow: inset 0 -1px 0 0 #1b1818;
 }
 .navbar .active-parent a {
   font-weight: 700;
-  background-color: #E1E5E8;
+  /* background-color: #E1E5E8; */
+  color: #1b1818;
+  box-shadow: inset 0 -1px 0 0 #1b1818;
 }
 
 #navbar-search {
@@ -72,9 +82,80 @@ th {
   right: 0.375rem;
 }
 
+/* Top navigation Mobile ----------------------------------------------------------- */
+@media (max-width: 991px) {
+
+  .navbar .navbar-nav .nav-link {
+    height: 48px;;
+  }
+  .github-edit-wrap {
+    margin: 20px 10px 20px 0;
+  }
+
+  #navbar-search .btn::after {
+    display: none;
+  }
+
+  .navbar-collapse {
+    /* background-color: rgba(0, 0, 0, .88); */
+    background-color: #fff;
+    position: absolute;
+    /* left: 200%; */
+    top: 200px;
+    right: 0;
+    overflow: scroll;
+    width: 260px;
+    max-height: 60vh;
+    margin-right: 24px;
+    margin-bottom: 108px;
+    padding: 24px;
+    -webkit-box-flex: 1;
+    z-index: 10;
+
+    transform: translateX(1000px);
+    transition-duration: 1s;
+  }
+
+  .navbar-collapse.show {
+    transform: translateX(0px);
+    transition-duration: 1s;
+  }
+
+  .menu-overlay.active {
+    transform: translateX(0px);
+    transition-duration: 1s;
+  }
+
+  .menu-overlay {
+    /* display: none; */
+    background-color: #000;
+    bottom: 0;
+    left: 0;
+    opacity: 0.88;
+    filter: alpha(opacity=80);
+    /* IE7 & 8 */
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 5;
+    transform: translateX(1000px);
+    transition-duration: 1s;
+  }
+
+}
+
+
+
+body {
+  font-feature-settings: "liga", "kern";
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
 /* Push content below fixed header ------------------------------------------ */
 #main_content_wrapper {
   margin-top: 55px;
+  padding: 0 48px;
 }
 
 /* Fix so anchors don't jump under the fixed header ------------------------- */
@@ -712,6 +793,7 @@ a.current {
   background-image: linear-gradient(180deg, #fafafa 0%, #ddd 90%);
   border: 1px solid #C9CDD1;
   border-radius: 5px;
+  margin-right: 10px;
 }
 .github-edit-wrap:hover {
   border-color: #777;
diff --git a/assets/img/XRPLedger_DevPortal-black.svg b/assets/img/XRPLedger_DevPortal-black.svg
new file mode 100644
index 0000000000..ac4ea314c6
--- /dev/null
+++ b/assets/img/XRPLedger_DevPortal-black.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 398 116" style="enable-background:new 0 0 398 116;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.9;}
+</style>
+<g class="st0">
+	<path d="M187.5,36.9l4.5-9.1h7.6l-7.7,13.6l7.9,13.9h-7.6l-4.6-9.3l-4.6,9.3h-7.6l7.9-13.9l-7.7-13.6h7.6L187.5,36.9z M211.7,45.5
+		h-3.6v9.7h-6.6V27.8h10.8c3.3,0,5.8,0.7,7.6,2.2c1.8,1.4,2.8,3.5,2.8,6.1c0,1.9-0.4,3.5-1.2,4.8c-0.8,1.3-2,2.3-3.6,3.1l5.7,11.1
+		v0.3h-7.1L211.7,45.5z M208.2,40.4h4.2c1.3,0,2.2-0.3,2.8-1c0.6-0.7,1-1.6,1-2.8c0-1.2-0.3-2.1-1-2.8c-0.6-0.7-1.6-1-2.8-1h-4.2
+		V40.4z M233,45.9v9.3h-6.6V27.8h11c2.1,0,4,0.4,5.6,1.2c1.6,0.8,2.9,1.9,3.8,3.3c0.9,1.4,1.3,3,1.3,4.9c0,2.7-1,4.8-2.9,6.4
+		c-1.9,1.6-4.5,2.4-7.9,2.4H233z M233,40.8h4.3c1.3,0,2.3-0.3,2.9-1c0.7-0.6,1-1.5,1-2.7c0-1.3-0.3-2.3-1-3.1
+		c-0.7-0.8-1.6-1.2-2.8-1.2H233V40.8z M267,50.2h11.5v5.1h-18.2V27.8h6.6V50.2z M298,43.6h-10.4v6.6h12.3v5.1H281V27.8h19v5.1h-12.3
+		v5.8H298V43.6z M302.2,55.2V27.8h8.9c2.4,0,4.6,0.6,6.6,1.7c1.9,1.1,3.4,2.6,4.5,4.7c1.1,2,1.6,4.2,1.7,6.7v1.3
+		c0,2.5-0.5,4.8-1.6,6.8c-1.1,2-2.6,3.5-4.5,4.7c-1.9,1.1-4.1,1.7-6.5,1.7H302.2z M308.8,32.9v17.3h2.3c1.9,0,3.4-0.7,4.4-2
+		c1-1.4,1.5-3.4,1.5-6v-1.2c0-2.7-0.5-4.7-1.5-6c-1-1.3-2.5-2-4.5-2H308.8z M349.3,51.9c-1,1.1-2.5,2-4.5,2.7c-2,0.7-4.1,1-6.5,1
+		c-3.6,0-6.5-1.1-8.6-3.3c-2.2-2.2-3.3-5.3-3.5-9.2l0-2.4c0-2.7,0.5-5.1,1.4-7.1c1-2,2.3-3.6,4.1-4.7c1.8-1.1,3.9-1.6,6.2-1.6
+		c3.4,0,6.1,0.8,8,2.4c1.9,1.6,3,3.9,3.3,7h-6.4c-0.2-1.5-0.7-2.6-1.5-3.3c-0.8-0.7-1.8-1-3.2-1c-1.7,0-2.9,0.7-3.9,2.1
+		c-0.9,1.4-1.4,3.4-1.4,6v1.7c0,2.7,0.5,4.8,1.4,6.2c0.9,1.4,2.4,2.1,4.4,2.1c1.7,0,3-0.4,3.9-1.2v-4.3h-4.6v-4.5h11.2V51.9z
+		 M369.8,43.6h-10.4v6.6h12.3v5.1h-18.9V27.8h19v5.1h-12.3v5.8h10.4V43.6z M384.3,45.5h-3.6v9.7H374V27.8h10.8
+		c3.3,0,5.8,0.7,7.6,2.2c1.8,1.4,2.8,3.5,2.8,6.1c0,1.9-0.4,3.5-1.2,4.8c-0.8,1.3-2,2.3-3.6,3.1l5.7,11.1v0.3h-7.1L384.3,45.5z
+		 M380.7,40.4h4.2c1.3,0,2.2-0.3,2.8-1c0.6-0.7,1-1.6,1-2.8c0-1.2-0.3-2.1-1-2.8c-0.6-0.7-1.6-1-2.8-1h-4.2V40.4z M178.3,91.2V63.8
+		h7.8c2.4,0,4.5,0.5,6.3,1.6c1.8,1.1,3.3,2.6,4.2,4.5c1,2,1.5,4.2,1.5,6.7v1.8c0,2.6-0.5,4.9-1.5,6.8c-1,2-2.4,3.4-4.3,4.5
+		c-1.9,1-4,1.6-6.5,1.6H178.3z M182,66.7v21.5h3.8c2.8,0,5-0.9,6.5-2.6c1.6-1.7,2.3-4.2,2.3-7.4v-1.6c0-3.1-0.7-5.5-2.2-7.3
+		c-1.5-1.7-3.5-2.6-6.2-2.6H182z M218.9,78.5h-11.9v9.7h13.8v3h-17.5V63.8h17.3v3h-13.6v8.8h11.9V78.5z M234,86.4l7.9-22.7h4
+		l-10.2,27.5h-3.2l-10.2-27.5h3.9L234,86.4z M262,80.5v10.8h-3.6V63.8h10.1c3,0,5.4,0.8,7.1,2.3c1.7,1.5,2.6,3.6,2.6,6.1
+		c0,2.7-0.8,4.7-2.5,6.2c-1.7,1.4-4,2.2-7.2,2.2H262z M262,77.5h6.5c1.9,0,3.4-0.5,4.5-1.4c1-0.9,1.5-2.2,1.5-4
+		c0-1.6-0.5-2.9-1.5-3.9c-1-1-2.4-1.5-4.2-1.5H262V77.5z M303.5,78.4c0,2.7-0.5,5-1.4,7.1c-0.9,2-2.2,3.5-3.9,4.6
+		c-1.7,1.1-3.6,1.6-5.8,1.6c-2.2,0-4.1-0.5-5.8-1.6c-1.7-1.1-3-2.6-3.9-4.5c-0.9-2-1.4-4.3-1.4-6.9v-2c0-2.6,0.5-5,1.4-7
+		c0.9-2,2.2-3.6,3.9-4.6c1.7-1.1,3.6-1.6,5.8-1.6c2.2,0,4.1,0.5,5.8,1.6c1.7,1.1,3,2.6,3.9,4.6c0.9,2,1.4,4.4,1.4,7V78.4z
+		 M299.9,76.6c0-3.3-0.7-5.8-2-7.5c-1.3-1.7-3.1-2.6-5.5-2.6c-2.3,0-4.1,0.9-5.4,2.6c-1.3,1.7-2,4.2-2,7.2v2c0,3.2,0.7,5.6,2,7.5
+		c1.3,1.8,3.2,2.7,5.5,2.7c2.3,0,4.2-0.8,5.4-2.5c1.3-1.7,1.9-4.2,2-7.3V76.6z M318.6,80.1h-6.5v11.1h-3.6V63.8h9.1
+		c3.1,0,5.5,0.7,7.1,2.1c1.7,1.4,2.5,3.5,2.5,6.2c0,1.7-0.5,3.2-1.4,4.5c-0.9,1.3-2.2,2.2-3.9,2.9l6.5,11.7v0.2h-3.9L318.6,80.1z
+		 M312.2,77.2h5.6c1.8,0,3.2-0.5,4.3-1.4c1.1-0.9,1.6-2.2,1.6-3.7c0-1.7-0.5-3-1.5-3.9c-1-0.9-2.5-1.4-4.4-1.4h-5.6V77.2z
+		 M349.5,66.7h-8.8v24.5H337V66.7h-8.8v-3h21.3V66.7z M366.8,84.1h-11.5l-2.6,7.2H349l10.5-27.5h3.2l10.5,27.5h-3.7L366.8,84.1z
+		 M356.4,81.1h9.3l-4.7-12.9L356.4,81.1z M380.1,88.3h13v3h-16.7V63.8h3.6V88.3z"/>
+	<path d="M35.4,7.2h2.8V0h-2.8C22.9,0,12.8,10.1,12.8,22.6v16.4c0,7.2-5.6,13.2-12.8,13.6l0.2,3.6L0,59.8
+		c7.2,0.4,12.8,6.4,12.8,13.6v18.9c0,13.1,10.6,23.7,23.6,23.7v-7.2c-9,0-16.4-7.3-16.4-16.4V73.4c0-7.1-3.6-13.5-9.1-17.2
+		c5.5-3.8,9.1-10.1,9.1-17.2V22.6C20.1,14.1,26.9,7.2,35.4,7.2z"/>
+	<path d="M118.6,7.2h-2.8V0h2.8c12.4,0,22.5,10.1,22.5,22.6v16.4c0,7.2,5.6,13.2,12.8,13.6l-0.2,3.6l0.2,3.6
+		c-7.2,0.4-12.8,6.4-12.8,13.6v18.9c0,13.1-10.6,23.7-23.6,23.7v-7.2c9,0,16.4-7.3,16.4-16.4V73.4c0-7.1,3.6-13.5,9.1-17.2
+		c-5.5-3.8-9.1-10.1-9.1-17.2V22.6C133.9,14.1,127.1,7.2,118.6,7.2z"/>
+	<path d="M103.2,29h10.7L91.6,49.9c-8.1,7.5-21.2,7.5-29.2,0L40.1,29h10.7l16.9,15.8c5.1,4.8,13.4,4.8,18.5,0L103.2,29z"/>
+	<path d="M50.7,87H40l22.4-21c8.1-7.6,21.2-7.6,29.2,0L114,87h-10.7L86.3,71c-5.1-4.8-13.4-4.8-18.5,0L50.7,87z"/>
+</g>
+</svg>
diff --git a/assets/js/jump-to-top.js b/assets/js/jump-to-top.js
index 7d5d67c553..69c1aafac9 100644
--- a/assets/js/jump-to-top.js
+++ b/assets/js/jump-to-top.js
@@ -1,4 +1,20 @@
 $(document).ready(function() {
+
+  // Mobile menu.  
+  $('[data-toggle="slide-collapse"]').on('click', function() {
+    $navMenuCont = $($(this).data('target'));
+    $navMenuCont.toggleClass('show');
+    $(".menu-overlay").toggleClass('active');
+  });
+  $(".menu-overlay").click(function(event) {
+    $(".navbar-toggler").trigger("click");
+  });
+  
+
+
+
+
+
   var TO_TOP_MIN = 50;
   var TO_TOP_SPEED = 500;
   var TO_TOP_POS = 0;
diff --git a/tool/template-base.html b/tool/template-base.html
index 60fad520b7..e577e6fd5b 100644
--- a/tool/template-base.html
+++ b/tool/template-base.html
@@ -54,12 +54,12 @@
 <body class="xrp-ledger-dev-portal {% if currentpage.sidebar is undefined or currentpage.sidebar != "disabled" %}sidebar-primary {% endif %}{% block bodyclasses %}{% endblock %}">
 
   <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-white">
-    <a href="{% if target.no_cover is defined and target.no_cover %}/{% else %}index.html{% endif %}" class="navbar-brand"><img src="assets/img/XRPLedger_DevPortal_Gray.svg" class="logo" width="120" height="35" alt="XRP Ledger Dev Portal" /></a>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHolder" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+    <a href="{% if target.no_cover is defined and target.no_cover %}/{% else %}index.html{% endif %}" class="navbar-brand"><img src="assets/img/XRPLedger_DevPortal-black.svg" class="logo"  height="44" alt="XRP Ledger Dev Portal" /></a>
+    <button class="navbar-toggler" type="button" data-toggle="slide-collapse" data-target="#navbarHolder" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <div class="collapse navbar-collapse" id="navbarHolder">
-      <ul class="nav navbar-nav mr-auto">
+    <div class="collapse navbar-collapse justify-content-end" id="navbarHolder">
+      <ul class="nav navbar-nav">
         {% set funnels = [] %}
         {% for page in pages %}
           {% if page.funnel is defined and page.funnel not in funnels %}
@@ -71,6 +71,7 @@
           {% endif %}
         {% endfor %}
       </ul><!-- /.navbar-nav -->
+      {% include 'template-github-edit.html' %}
       <form class="navbar-form navbar-right" id="navbar-search" role="search" method="get" action="https://www.google.com/search">
         <div class="form-inline">
           <label class="sr-only" for="topsearchbar">Search this site</label>
@@ -79,8 +80,8 @@
           <button type="submit" class="btn btn-default fa fa-search">&nbsp;</button>
         </div>
       </form>
-      {% include 'template-github-edit.html' %}
     </div>
+    <div class="menu-overlay"></div>
   </nav>
 
   <div class="container-fluid" role="document" id="main_content_wrapper">