fix(header): Hide the user name on mobile screen

zendesk · Apr 2, 2020 · 2ce963b · 2ce963b
1 parent a43e3fa
commit 2ce963b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git a/style.css b/style.css
@@ -673,6 +673,22 @@ ul {
   display: inline-block;
 }
 
+@media (max-width: 768px) {
+  .nav-wrapper .hide-on-mobile {
+    border: 0;
+    clip: rect(0 0 0 0);
+    -webkit-clip-path: inset(50%);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    white-space: nowrap;
+  }
+}
+
 .nav-wrapper .menu-button {
   background: none;
   border: 0;

diff --git a/styles/_header.scss b/styles/_header.scss
@@ -62,6 +62,12 @@ $header-height: 71px;
     &.sign-in { display: inline-block; }
   }
 
+  .hide-on-mobile {
+    @include mobile {
+      @include visually-hidden;
+    }
+  }
+
   .menu-button {
     @include tablet { display: none; }
     background: none;

diff --git a/templates/header.hbs b/templates/header.hbs
@@ -20,10 +20,12 @@
       <div class="user-info dropdown">
         <button class="dropdown-toggle" aria-haspopup="true">
           {{user_avatar class="user-avatar"}}
-          {{user_name}}
-          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="dropdown-chevron-icon" aria-hidden="true">
-            <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
-          </svg>
+          <span class="hide-on-mobile">
+            {{user_name}}
+            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="dropdown-chevron-icon" aria-hidden="true">
+              <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
+            </svg>
+          </span>
         </button>
         <div class="dropdown-menu" role="menu">
           {{link "my_activities" role="menuitem"}}