diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss
index a0e03b996d..8bfeb8b292 100644
--- a/aio/src/styles/1-layouts/_top-menu.scss
+++ b/aio/src/styles/1-layouts/_top-menu.scss
@@ -62,6 +62,183 @@ mat-toolbar.app-toolbar {
     color: $white;
   }
 
+  // HAMBURGER BUTTON
+  .hamburger {
+    height: 100%;
+    margin: $hamburgerShownMargin;
+    padding: 0;
+
+    @media (min-width: $showTopMenuWidth) {
+      // Hamburger hidden by default on large screens.
+      // (Will be shown per doc.)
+      margin: $hamburgerHiddenMargin;
+    }
+
+    @media (max-width: 480px) {
+      min-width: 15%;
+    }
+
+    &:not(.starting) {
+      transition-duration: 0.4s;
+      transition-property: color, margin;
+      transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+
+    &:hover {
+      color: $offwhite;
+    }
+
+    & .mat-icon {
+      color: $white;
+      position: inherit;
+    }
+  }
+
+  // HOME NAV-LINK
+  .nav-link.home {
+    cursor: pointer;
+    margin: 0 16px 0 0;
+    padding: 8px 0;
+
+    &:focus {
+      // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
+      outline: 1px solid $focus-outline-ondark;
+      outline-offset: 4px;
+    }
+
+    @media screen and (max-width: $hideTopMenuWidth) {
+      padding: 4px 0;
+    }
+
+    @media screen and (max-width: 480px) {
+      margin-right: 8px;
+    }
+
+    img {
+      position: relative;
+      margin-top: -21px;
+      top: 12px;
+      height: 40px;
+
+      @media (max-width: $hideTopMenuWidth) {
+        &:hover {
+          transform: scale(1.1);
+        }
+      }
+    }
+  }
+
+  // TOP MENU
+  aio-top-menu {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 80%;
+
+    ul {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      list-style-position: inside;
+      padding: 0px;
+      margin: 0px;
+
+      li {
+        padding-bottom: 2px;
+        list-style-type: none;
+        cursor: pointer;
+
+        &:focus {
+          outline: none;
+        }
+
+        a.nav-link {
+          margin: 0 4px;
+          padding: 0px;
+          cursor: pointer;
+
+          .nav-link-inner {
+            border-radius: 4px;
+            padding: 8px 16px;
+
+            &:hover {
+              background: rgba($white, 0.15);
+            }
+          }
+
+          &:focus {
+            outline: none;
+
+            .nav-link-inner {
+              background: rgba($white, 0.15);
+              border-radius: 1px;
+              box-shadow: 0 0 1px 2px $focus-outline-ondark;
+            }
+          }
+
+          &:active {
+            .nav-link-inner {
+              background: rgba($white, 0.15);
+            }
+          }
+        }
+
+        &.selected {
+          a.nav-link {
+            .nav-link-inner {
+              background: rgba($white, 0.15);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // SEARCH BOX
+  aio-search-box.search-container {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    width: 100%;
+    min-width: 150px;
+    height: 100%;
+    margin-right: 16px;
+
+    input {
+      color: $darkgray;
+      border: none;
+      border-radius: 100px;
+      background-color: $white;
+      padding: 5px 16px;
+      margin-left: 8px;
+      width: 180px;
+      max-width: 240px;
+      height: 50%;
+      -webkit-appearance: none;
+
+      &:focus {
+        outline: none;
+      }
+
+      @include placeholder {
+        @include font-size(14);
+        color: $mediumgray;
+      }
+
+      @include bp(big) {
+        transition: width 0.4s ease-in-out;
+
+        &:focus {
+          width: 80%;
+        }
+      }
+
+      @media (max-width: 480px) {
+        width: 150px;
+      }
+    }
+  }
+
   // EXTERNAL LINK ICONS
   .toolbar-external-icons-container {
     display: flex;
@@ -96,180 +273,3 @@ mat-toolbar.app-toolbar {
     }
   }
 }
-
-// HAMBURGER BUTTON
-.hamburger {
-  height: 100%;
-  margin: $hamburgerShownMargin;
-  padding: 0;
-
-  @media (min-width: $showTopMenuWidth) {
-    // Hamburger hidden by default on large screens.
-    // (Will be shown per doc.)
-    margin: $hamburgerHiddenMargin;
-  }
-
-  @media (max-width: 480px) {
-    min-width: 15%;
-  }
-
-  &:not(.starting) {
-    transition-duration: 0.4s;
-    transition-property: color, margin;
-    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
-  }
-
-  &:hover {
-    color: $offwhite;
-  }
-
-  & .mat-icon {
-    color: $white;
-    position: inherit;
-  }
-}
-
-// HOME NAV-LINK
-.nav-link.home {
-  cursor: pointer;
-  margin: 0 16px 0 0;
-  padding: 8px 0;
-
-  &:focus {
-    // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
-    outline: 1px solid $focus-outline-ondark;
-    outline-offset: 4px;
-  }
-
-  @media screen and (max-width: $hideTopMenuWidth) {
-    padding: 4px 0;
-  }
-
-  @media screen and (max-width: 480px) {
-    margin-right: 8px;
-  }
-
-  img {
-    position: relative;
-    margin-top: -21px;
-    top: 12px;
-    height: 40px;
-
-    @media (max-width: $hideTopMenuWidth) {
-      &:hover {
-        transform: scale(1.1);
-      }
-    }
-  }
-}
-
-// TOP MENU
-aio-top-menu {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 80%;
-
-  ul {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    list-style-position: inside;
-    padding: 0px;
-    margin: 0px;
-
-    li {
-      padding-bottom: 2px;
-      list-style-type: none;
-      cursor: pointer;
-
-      &:focus {
-        outline: none;
-      }
-
-      a.nav-link {
-        margin: 0 4px;
-        padding: 0px;
-        cursor: pointer;
-
-        .nav-link-inner {
-          border-radius: 4px;
-          padding: 8px 16px;
-
-          &:hover {
-            background: rgba($white, 0.15);
-          }
-        }
-
-        &:focus {
-          outline: none;
-
-          .nav-link-inner {
-            background: rgba($white, 0.15);
-            border-radius: 1px;
-            box-shadow: 0 0 1px 2px $focus-outline-ondark;
-          }
-        }
-
-        &:active {
-          .nav-link-inner {
-            background: rgba($white, 0.15);
-          }
-        }
-      }
-
-      &.selected {
-        a.nav-link {
-          .nav-link-inner {
-            background: rgba($white, 0.15);
-          }
-        }
-      }
-    }
-  }
-}
-
-// SEARCH BOX
-aio-search-box.search-container {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  width: 100%;
-  min-width: 150px;
-  height: 100%;
-  margin-right: 16px;
-
-  input {
-    color: $darkgray;
-    border: none;
-    border-radius: 100px;
-    background-color: $white;
-    padding: 5px 16px;
-    margin-left: 8px;
-    width: 180px;
-    max-width: 240px;
-    height: 50%;
-    -webkit-appearance: none;
-
-    &:focus {
-      outline: none;
-    }
-
-    @include placeholder {
-      @include font-size(14);
-      color: $mediumgray;
-    }
-
-    @include bp(big) {
-      transition: width 0.4s ease-in-out;
-
-      &:focus {
-        width: 80%;
-      }
-    }
-
-    @media (max-width: 480px) {
-      width: 150px;
-    }
-  }
-}