diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss
index d90ffa25e6..0488d764a5 100644
--- a/aio/src/styles/1-layouts/_top-menu.scss
+++ b/aio/src/styles/1-layouts/_top-menu.scss
@@ -64,18 +64,22 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
   margin: $hamburgerShownMargin;
   padding: 0;
 
-  &:not(.starting) {
-    transition-duration: 0.4s;
-    transition-property: color, margin;
-    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
-  }
-
   @media (min-width: 992px) {
     // 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;
   }
@@ -92,6 +96,10 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
   margin: 0 16px 0 0;
   padding: 21px 0;
 
+  @media screen and (max-width: 480px) {
+    margin-right: 8px;
+  }
+
   img {
     position: relative;
     margin-top: -21px;
@@ -194,12 +202,17 @@ aio-search-box.search-container {
   .toolbar-external-icons-container {
     display: flex;
     flex-direction: row;
+    height: 100%;
 
     a {
       display: flex;
       align-items: center;
       margin-left: 16px;
 
+      @media screen and (max-width: 480px) {
+        margin-left: 8px;
+      }
+
       &:hover {
         opacity: 0.8;
       }