Style top nav

styles/_buttons.scss

@@ -1,23 +1,23 @@
 .content a.button {
-  color: $black;
-  border: 1px solid $gray-300;
+  color: $white;
+  border: 2px solid $white;
 }
 .content a.button:hover {
   border: 1px solid $black;
 }
 
 .btn-outline-secondary {
-  color: $black;
-  border-color: $gray-300;
+  color: $white;
+  border-color: $white;
 }
 
 #main_content_wrapper .btn-outline-secondary:hover,
 #main_content_wrapper .btn-outline-secondary:active,
 .button:hover, #request_button:hover {
   /* Undo Bootstrap styling */
-  color: $black;
+  color: $white;
   background-color: inherit;
-  border: 1px solid $black;
+  border: 2px solid $white;
 }
 
 /* Button styling ----------------------------------------------------------- */

styles/_colors.scss

@@ -108,3 +108,10 @@ $body-color:      $white;
 $headings-color:  $white;
 $text-muted:      $gray-200;
 $breadcrumb-bg:   $black;
+$dropdown-bg:     rgba(34,37,43,0.8);
+$dropdown-divider-bg: $black;
+$dropdown-color:  $secondary;
+$dropdown-link-color: $white;
+$dropdown-link-hover-color: $primary;
+$dropdown-link-hover-bg: transparent;
+$dropdown-link-active-bg: transparent;

styles/_github-edit.scss

@@ -1,22 +1,10 @@
 /* Edit on GitHub link ------------------------------------------------------ */
-.github-edit-wrap {
-  border: 1px solid $gray-400;
-  margin-right: 5px;
-  margin-left: 5px;
-}
-.github-edit-wrap:hover {
-  border-color: $black;
-}
-.github-edit-wrap .github-edit {
-  background-image: url(../vendor/github-marks/GitHub-Mark-32px.png);
+.github-edit-wrap .github-edit.nav-link {
+  background-image: url(../vendor/github-marks/GitHub-Mark-Light-32px.png);
   background-size: 24px 24px;
   background-position: left 12px center;
   background-repeat: no-repeat;
-  padding: 8px 16px 8px 48px;
-  color: $gray-600;
+  padding-left: 48px;
   text-decoration: none;
   display: block;
-  line-height: 17px; /* Match search box height */
-  font-family: "Space Mono", monospace;
-  font-weight: 700;
 }

styles/_top-nav.scss

@@ -1,33 +1,70 @@
 /* Top navigation ----------------------------------------------------------- */
 
-.navbar.fixed-top {
-  background-color: $black; // TODO: unnecessary if top nav is no longer fixed
-}
-
 .navbar .navbar-nav .nav-link {
   color: $white;
 }
 
-.navbar .navbar-nav .nav-link:hover,
-.navbar .navbar-nav .nav-link:active,
-.navbar .navbar-nav .active .nav-link,
-.navbar .active-parent .nav-link {
-  color: $white;
+.dropdown-toggle::after {
+  border-width: 0;
+  position: absolute;
+  top: 80%;
+  left: 50%;
+}
+
+.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;
+}
+
+.dropdown.show .dropdown-toggle.with-caret::after {
+  // border-top: 0;
+  // border-right: 5px solid transparent;
+  // border-left: 5px solid transparent;
+  // border-bottom: 8px solid $primary;
+  transform: scaleY(-1);
+}
+
+.dropdown.show .dropdown-toggle {
+  color: $gray-500;
+  position: relative;
+}
+
+.dropdown.show .dropdown-toggle:not(.with-caret)::after,
+.dropdown-toggle:not(.with-caret):hover::after {
+  content: " ";
+  display: static;
+  border: 3px solid $primary;
+  border-radius: 50%;
+  font-size: 0;
+  height: 0;
+  width: 0;
+}
+
+
+
+.navbar .dropdown-menu {
+  backdrop-filter: blur(8px);
+  border-radius: 4px;
+  padding: 0.5rem 1rem;
+  min-width: 250px;
+
+  .dropdown-item {
+    line-height: 262%;
+    border-bottom: 2px solid $black;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    &.active, &:hover {
       font-weight: bold;
     }
-
-.navbar.fixed-top {
-  font-weight: 400;
-  padding: 0;
-  margin: 0 48px;
-}
-
-@media (max-width: 1105px) {
-  .navbar.fixed-top {
-    margin: 0 20px;
-  }
-  .navbar .navbar-nav .nav-link {
-    padding-right: 5px;
   }
 }
 
@@ -45,7 +82,6 @@
   font-size: 1rem;
   line-height: 52px;
   text-decoration: none;
-  font-family: 'Space Mono', monospace;
 }
 
 .navbar .navbar-nav .nav-link:hover {
@@ -144,36 +180,6 @@
 
 }
 
-/* Push content below fixed header ------------------------------------------ */
-#main_content_wrapper {
-  margin-top: 68px;
-  // padding: 0 48px;
-}
-
-/* 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: -67px;
-  height: 67px;
-  visibility: hidden;
-}
-
-.card h1:before,
-.card h2:before,
-.card h3:before,
-.card h4:before,
-.card h5:before,
-.card h6:before {
-  display: none;
-}
 
 
 @media (max-width: 1010px) {
@@ -184,7 +190,6 @@
   }
 }
 
-#navbarHolder .language-selector .btn {
+#navbarHolder .language-selector {
   font-size: 0.875rem;
-  padding: .375rem .75rem;
 }

styles/xrpl.scss

@@ -3,10 +3,11 @@
 @import "_colors.scss";
 
 $navbar-padding-y: 0;
-$navbar-nav-link-padding-x: 1rem;
+$navbar-nav-link-padding-x: 1.25rem;
 $border-radius: 0;
 $border-radius-lg: 0;
 $border-radius-sm: 0;
+$dropdown-border-width: 0;
 
 // @import "_font-face.scss";
 $font-family-monospace: 'Work Sans', monospace;

tool/template-top-nav.html

@@ -55,9 +55,9 @@
 
     <div class="nav navbar-nav language-selector">
       <div class="dropdown">
-        <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="language_selector_header_btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <a class="nav-link dropdown-toggle with-caret" type="button" id="language_selector_header_btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           {{(config.languages|selectattr('code', 'eq', target.lang)|first).display_name}}
-        </button>
+        </a>
         <div class="dropdown-menu" aria-labelledby="language_selector_header_btn">
           {% for lang in config.languages %}
           <a class="dropdown-item" href="{{lang.prefix}}{{currentpage.html}}">{{lang.display_name}}</a>