diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index d0ef59c55..a29ac4b59 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -577,72 +577,6 @@ body > header,
     background: none;
   }
 
-  .menu > li {
-    display: block;
-    width: 100%;
-
-    @include breakpoint(medium) {
-      width: auto;
-    }
-
-    a {
-      color: inherit;
-      line-height: inherit;
-      padding-left: 0;
-
-      @include breakpoint(medium) {
-        font-size: $small-font-size;
-        padding: rem-calc(8) rem-calc(16);
-      }
-    }
-
-    .button {
-      background: none;
-      text-align: left;
-
-      @include breakpoint(medium) {
-        @include brand-color;
-        background: $body-background;
-        text-align: center;
-      }
-    }
-  }
-
-  .has-submenu {
-
-    &.is-active a {
-      font-weight: bold;
-    }
-  }
-
-  .menu {
-
-    @include breakpoint(small only) {
-      border-bottom: 1px solid $border;
-      margin-bottom: $line-height;
-      margin-top: $line-height / 2;
-      padding-bottom: $line-height;
-
-      .submenu {
-        margin-top: 0;
-      }
-    }
-
-    &.is-dropdown-submenu {
-      @extend %body-colors;
-      margin: 0;
-      margin-top: rem-calc(-12);
-      padding: 0;
-      z-index: 9;
-    }
-
-    .is-submenu-item {
-      display: block;
-      height: auto;
-      margin-bottom: 0;
-    }
-  }
-
   .top-bar-title {
     line-height: $line-height;
     margin-right: 0;
@@ -731,96 +665,6 @@ body > header,
   }
 }
 
-.subnavigation {
-  display: flex;
-  flex-direction: column;
-
-  @include breakpoint(medium) {
-    @include background-with-text-contrast($subnavigation, subnavigation);
-    flex-direction: row;
-    padding-bottom: 0;
-
-    > :first-child {
-      flex-grow: 1;
-    }
-  }
-
-  ul {
-    list-style-type: none;
-    margin: 0;
-
-    li {
-      @include breakpoint(medium) {
-        display: inline-block;
-        margin-right: rem-calc(20);
-      }
-    }
-  }
-
-  a {
-    color: inherit;
-    display: inline-block;
-    padding-bottom: $line-height / 2;
-    padding-top: $line-height / 2;
-    position: relative;
-    text-align: left;
-    width: 100%;
-
-    @include breakpoint(medium) {
-      display: block;
-      font-weight: bold;
-      width: auto;
-
-      &:hover {
-        @include anchor-color;
-      }
-
-      &.is-active {
-        @include brand-color;
-        border-bottom: 2px solid;
-        margin-bottom: 1px;
-      }
-    }
-
-    &:focus {
-      z-index: 1;
-    }
-  }
-
-  .input-group {
-    padding-top: $line-height / 4;
-
-    @include breakpoint(medium) {
-      margin-bottom: 0;
-    }
-  }
-
-  .input-group-field {
-    margin-bottom: 0 !important;
-  }
-
-  .input-group-button {
-    line-height: $line-height * 1.5;
-    padding-bottom: 0;
-
-    button {
-      @include background-with-text-contrast($border);
-      border: 1px solid #ccc;
-      border-left: 0;
-      height: $line-height * 1.5;
-      line-height: $line-height * 1.5;
-      padding-top: 0;
-    }
-  }
-
-  input {
-    height: $line-height * 1.5 !important;
-    margin-bottom: 0;
-    margin-right: 0;
-    width: 100%;
-  }
-}
-
 .top-bar-right {
 
   .is-active {
diff --git a/app/assets/stylesheets/layout/account_menu.scss b/app/assets/stylesheets/layout/account_menu.scss
new file mode 100644
index 000000000..9ad2d316b
--- /dev/null
+++ b/app/assets/stylesheets/layout/account_menu.scss
@@ -0,0 +1,65 @@
+.account-menu.menu {
+
+  @include breakpoint(small only) {
+    margin-top: $line-height / 2;
+
+    &,
+    .menu {
+      border-bottom: 1px solid $border;
+      margin-bottom: $line-height;
+      padding-bottom: $line-height;
+    }
+  }
+
+  .is-dropdown-submenu {
+    @extend %body-colors;
+    margin: 0;
+    margin-top: rem-calc(-12);
+    padding: 0;
+    z-index: 9;
+  }
+
+  .is-submenu-item {
+    display: block;
+    height: auto;
+    margin-bottom: 0;
+  }
+
+  li {
+    display: block;
+    width: 100%;
+
+    @include breakpoint(medium) {
+      width: auto;
+    }
+
+    a {
+      color: inherit;
+      line-height: inherit;
+      padding-left: 0;
+
+      @include breakpoint(medium) {
+        font-size: $small-font-size;
+        padding: rem-calc(8) rem-calc(16);
+      }
+    }
+
+    .button {
+      background: none;
+      text-align: left;
+
+      @include breakpoint(medium) {
+        @include brand-color;
+        background: $body-background;
+        text-align: center;
+      }
+    }
+  }
+
+  .has-submenu {
+
+    &.is-active a {
+      font-weight: bold;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/layout/subnavigation.scss b/app/assets/stylesheets/layout/subnavigation.scss
new file mode 100644
index 000000000..217bb2632
--- /dev/null
+++ b/app/assets/stylesheets/layout/subnavigation.scss
@@ -0,0 +1,89 @@
+.subnavigation {
+  display: flex;
+  flex-direction: column;
+
+  @include breakpoint(medium) {
+    @include background-with-text-contrast($subnavigation, subnavigation);
+    flex-direction: row;
+    padding-bottom: 0;
+
+    > :first-child {
+      flex-grow: 1;
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+
+    li {
+      @include breakpoint(medium) {
+        display: inline-block;
+        margin-right: rem-calc(20);
+      }
+    }
+  }
+
+  a {
+    color: inherit;
+    display: inline-block;
+    padding-bottom: $line-height / 2;
+    padding-top: $line-height / 2;
+    position: relative;
+    text-align: left;
+    width: 100%;
+
+    @include breakpoint(medium) {
+      display: block;
+      font-weight: bold;
+      width: auto;
+
+      &:hover {
+        @include anchor-color;
+      }
+
+      &.is-active {
+        @include brand-color;
+        border-bottom: 2px solid;
+        margin-bottom: 1px;
+      }
+    }
+
+    &:focus {
+      z-index: 1;
+    }
+  }
+
+  .input-group {
+    padding-top: $line-height / 4;
+
+    @include breakpoint(medium) {
+      margin-bottom: 0;
+    }
+  }
+
+  .input-group-field {
+    margin-bottom: 0 !important;
+  }
+
+  .input-group-button {
+    line-height: $line-height * 1.5;
+    padding-bottom: 0;
+
+    button {
+      @include background-with-text-contrast($border);
+      border: 1px solid #ccc;
+      border-left: 0;
+      height: $line-height * 1.5;
+      line-height: $line-height * 1.5;
+      padding-top: 0;
+    }
+  }
+
+  input {
+    height: $line-height * 1.5 !important;
+    margin-bottom: 0;
+    margin-right: 0;
+    width: 100%;
+  }
+}
diff --git a/app/components/layout/account_menu_component.html.erb b/app/components/layout/account_menu_component.html.erb
index 7c6875c84..8c34d82a7 100644
--- a/app/components/layout/account_menu_component.html.erb
+++ b/app/components/layout/account_menu_component.html.erb
@@ -1,4 +1,4 @@
-<ul class="menu" data-responsive-menu="medium-dropdown">
+<ul class="account-menu menu" data-responsive-menu="medium-dropdown">
   <%= render Layout::AdminLoginItemsComponent.new(user) %>
   <%= render Layout::NotificationItemComponent.new(user) %>
   <%= render Layout::LoginItemsComponent.new(user) %>