fix(navbar): hide 'Toggle Menu' text in mobile view, only visible to sr-only (#631) (#632)

Co-authored-by: Spyros <northdpole@users.noreply.github.com>

Author: Mohit5Upadhyay

application/frontend/src/scaffolding/Header/header.scss

@@ -23,7 +23,7 @@ main {
   &__container {
     max-width: 112rem; // max-w-7xl
     margin: 0 auto;
-    padding: 0 1rem;
+    padding: 0 2rem;
     @media (min-width: 640px) {
       padding: 0 1.5rem;
     }
@@ -46,7 +46,7 @@ main {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-left: 4rem;
+  margin-left: 2rem;
   img {
     height: 10rem;
     width: 10rem;
@@ -144,8 +144,8 @@ main {
   border-radius: var(--radius);
 
   .icon {
-    height: 1.25rem;
-    width: 1.25rem;
+    height: 2rem;
+    width: 2rem;
     color: var(--foreground);
   }
 
@@ -155,6 +155,18 @@ main {
   }
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .navbar__mobile-menu {
   position: fixed;
   top: 0;