diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index 72c5c4260c..b00611099d 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -56,7 +56,7 @@
 @import "../admin/components/input";
 @import "../admin/components/jquery_dialog";
 @import "../admin/components/messages";
-@import "../admin/components/navigation";
+@import "components/navigation"; // admin_v3
 @import "../admin/components/ng-cloak";
 @import "../admin/components/page_actions";
 @import "../admin/components/pagination";
diff --git a/app/webpacker/css/admin_v3/components/navigation.scss b/app/webpacker/css/admin_v3/components/navigation.scss
new file mode 100644
index 0000000000..2aeb3a8a30
--- /dev/null
+++ b/app/webpacker/css/admin_v3/components/navigation.scss
@@ -0,0 +1,174 @@
+// Navigation
+//---------------------------------------------------
+.inline-menu {
+  margin: 0;
+  -webkit-margin-before: 0;
+  -webkit-padding-start: 0;
+}
+
+nav.menu {
+  ul {
+    list-style: none;
+
+    li {
+      a {
+        padding: 10px 0;
+        display: block;
+        position: relative;
+        text-align: left;
+        border: 1px solid transparent;
+        text-transform: uppercase;
+        font-weight: 600;
+        font-size: 90%;
+      }
+
+      &.active a {
+        color: $color-2;
+        border-left-width: 0;
+        border-bottom-color: $color-2;
+      }
+
+      &:hover a {
+        color: $color-2;
+      }
+    }
+  }
+}
+
+.admin-login-navigation-bar {
+  ul {
+    text-align: right;
+
+    li {
+      padding: 5px 0 5px 10px;
+      text-align: right;
+      font-size: 90%;
+      color: $color-link;
+      margin-top: 8px;
+
+      &.user-logged-in-as {
+        width: 50%;
+        color: $color-body-text;
+      }
+
+      &:hover {
+        i {
+          color: $color-2;
+        }
+      }
+    }
+  }
+}
+
+#admin-menu {
+  background-color: $color-3;
+
+  ul {
+    display: flex;
+  }
+
+  li {
+    min-width: 90px;
+    flex-grow: 1;
+
+    a {
+      display: block;
+      padding: 25px 5px;
+      color: $color-1 !important;
+      text-transform: uppercase;
+      position: relative;
+      text-align: center;
+      font-weight: 600;
+
+      i {
+        display: inline;
+      }
+
+      &:hover {
+        background-color: $color-2;
+
+        &:after {
+          content: "";
+          position: absolute;
+          border-left: 10px solid transparent;
+          border-right: 10px solid transparent;
+          border-top: 5px solid $color-2;
+          bottom: 0px;
+          margin-bottom: -5px;
+          left: 50%;
+          margin-left: -10px;
+          z-index: 1;
+        }
+      }
+
+      span.text {
+        font-weight: 600;
+      }
+    }
+
+    a::before {
+      font-weight: normal;
+      padding-top: 0;
+    }
+
+    .dropdown {
+      width: 300px;
+      background-color: $color-3;
+      width: 200px;
+      z-index: 100000;
+
+      > li {
+        width: 200px !important;
+
+        a:after {
+          display: none;
+        }
+      }
+    }
+
+    &.selected a {
+      @extend a, :hover;
+    }
+  }
+}
+
+#sub-menu {
+  background-color: $color-2;
+  padding-bottom: 0;
+
+  li {
+    a {
+      display: block;
+      padding: 12px 20px;
+      color: $color-1;
+      text-align: center;
+      text-transform: uppercase;
+      position: relative;
+      font-size: 85%;
+    }
+
+    &.selected a,
+    a:hover {
+      &:after {
+        content: "";
+        position: absolute;
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-top: 5px solid $color-2;
+        bottom: 0px;
+        margin-bottom: -5px;
+        left: 50%;
+        margin-left: -10px;
+        z-index: 0;
+      }
+    }
+  }
+}
+
+#header figure {
+  margin: 0.25em 0;
+}
+
+#login-nav {
+  line-height: 1.75em;
+}