Top nav: start mobile layout

styles/_top-nav.scss

@@ -2,6 +2,7 @@
 .top-nav {
   background-color: $gray-900;
   height: 80px;
+  padding: 0;
 
   // Logo
   .navbar-brand {
@@ -10,11 +11,18 @@
     -webkit-transition: opacity 200ms ease, color 200ms ease;
     transition: opacity 200ms ease, color 200ms ease;
 
+
+    .logo {
+      margin-left: 0;
+    }
+
     &:hover {
       opacity: 0.75;
     }
 
     @include media-breakpoint-down(md) {
+      padding-left: 2rem;
+
       img {
         width: 120px;
       }
@@ -111,6 +119,10 @@
   @include media-breakpoint-up(lg) {
     padding: 0 3rem;
 
+    .navbar-brand {
+      margin-left: 0;
+    }
+
     .dropdown-toggle {
       &::after {
         display: none;
@@ -243,29 +255,38 @@
       }
     }
 
-    #navbar-search {
+    #topnav-pages {
-      flex-grow: 1;
+      flex-grow: 0;
-      .input-group {
-        flex-grow: 1;
-      }
     }
 
-    #topsearchbox {
+    #topnav-language {
-      width: 100%;
-    }
-
-    .language-selector {
       flex-grow: 0;
 
       #language_selector_header_btn {
         padding-right: 0;
-        // TODO: caret
+      }
+    }
+
+    @include media-breakpoint-up(xl) {
+      #topnav-search {
+        margin-left: 3.75rem;
+        margin-right: 1.25rem;
+      }
+    }
+    @media (min-width: 992px) and (max-width: 1020px) {
+      // Fix for top nav overflow in this range
+      .navbar-nav .nav-link {
+        padding: .5rem 1.6rem;
       }
     }
   }
 
   // Search bar & controls -----------------------------------------------------
-  #navbar-search {
+  #topnav-search {
+    flex-grow: 1;
+    .input-group {
+      flex-grow: 1;
+    }
 
     .input-group-text {
       border-width: 0;
@@ -285,6 +306,7 @@
       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 {
@@ -345,21 +367,47 @@
     }
     .navbar-toggler {
       border: 0;
-      padding: 0;
+
+      .navbar-toggler-icon {
+        background: none;
+
+        &::after,
+        &::before,
+        div {
+          content: " ";
+          background-color: $gray-100;
+          display: block;
+          height: 3px;
+          transition: all .3s ease-in-out;
+        }
+        &::before {
+          margin-bottom: 7px;
+        }
+        &::after {
+          margin-top: 7px;
+        }
+      }
 
       &:not(.collapsed) {
-        // Hack: turn white hamburger to approximately $green
+        .navbar-toggler-icon {
-        filter: brightness(0.5) sepia(1) saturate(5000%) hue-rotate(114deg) brightness(1.96) saturate(87%);
+          &::before {
+            transform: translateY(14px) rotate(135deg);
+          }
+          &::after {
+            transform: translateY(-6px) rotate(-135deg);
+          }
+          div {
+            transform: scale(0);
+          }
+        }
       }
     }
 
-    .navbar-nav .nav-link {
+    .navbar-nav .nav-link,
+    .navbar-collapse > .nav-item {
       line-height: 150%;
-    }
+      background: $gray-900;
-
+      padding: 1rem 2rem;
-    .github-edit-wrap .github-edit.nav-link {
-      background-image: unset;
-      padding-left: inherit;
     }
 
   }

styles/xrpl.scss

@@ -6,7 +6,7 @@
 $navbar-padding-y: 0;
 $nav-link-padding-x: 1.25rem;
 $nav-link-padding-y: 1rem;
-$navbar-brand-padding-y: 1rem;
+$navbar-brand-padding-y: 1.25rem;
 $navbar-nav-link-padding-x: 2rem;
 $navbar-nav-link-padding-y: .75rem;
 $border-radius: 0;

template/component-top-nav.html.jinja

@@ -1,11 +1,10 @@
-<div class="container-fluid">
+<nav class="top-nav navbar navbar-expand-lg navbar-dark fixed-top">
-<nav class="top-nav navbar navbar-expand-lg navbar-dark fixed-top 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="40" 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">
+  <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"></span>
+    <span class="navbar-toggler-icon"><div></div></span>
   </button>
-  <div class="collapse navbar-collapse justify-content-between" id="navbarHolder">
+  <div class="collapse navbar-collapse justify-content-between" id="top-main-nav">
-    <ul class="nav navbar-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 %}
@@ -58,22 +57,20 @@
       {% for page in (pages|first).children %}
       {{ dropdown(page) }}
       {% endfor %}
-
-      <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="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>
-      </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}}
@@ -86,6 +83,5 @@
         </div><!--/.dropdown-menu-->
       </div><!--/.dropdown-->
     </div><!--/.language-selector-->
-  </div><!--/#navbarHolder-->
+  </div><!--/#top-main-nav-->
 </nav>
-</div>