fixed menu bar padding in media queries

css/style.css

@@ -377,6 +377,7 @@ button, .button-primary, .button-secondary, .menu-button, .logo {
   border-radius: var(--radius-xxl);
   text-decoration: none;
   transition: transform 0.2s ease;
+  cursor: pointer;
 }
 
 button, .button-primary, .logo {
@@ -472,16 +473,16 @@ button:visited, .button-primary:visited, .logo:visited {
   backdrop-filter: blur(6px);
 }
 
-.site-header .menu-bar {
+.menu-bar {
   width: 900px;
-  padding: var(--spacing-5) var(--spacing-6) var(--spacing-4) var(--spacing-5);
+  padding: var(--spacing-5) var(--spacing-6) var(--spacing-4) var(--spacing-6);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 1rem;
+  gap: var(--spacing-4);
 }
 
-.menu-bar .menu-left {
+.menu-left, .menu-right {
   display: flex;
   align-items: stretch;
   gap: var(--spacing-4);
@@ -548,7 +549,6 @@ button:visited, .button-primary:visited, .logo:visited {
   color: var(--color-text-button-seconary-active);
 }
 
-
 .menu-button:active, 
 .desktop-nav a[aria-current="page"]:active,
 .mobile-menu a[aria-current="page"]:active {
@@ -558,7 +558,7 @@ button:visited, .button-primary:visited, .logo:visited {
 .desktop-nav-secondary ul {
   display: flex;
   align-items: stretch;
-  gap: var(--spacing-3);
+  gap: var(--spacing-4);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -578,62 +578,16 @@ button:visited, .button-primary:visited, .logo:visited {
   display: block;
 }
 
-.menu-toggle,
-.menu-close {
-  width: 44px;
-  height: 44px;
-  border: 1px solid var(--border);
-  border-radius: 0.75rem;
-  background: #fff;
-  color: inherit;
-  cursor: pointer;
-}
-
 .menu-toggle {
   display: none;
   position: relative;
-}
-
-.menu-toggle span {
-  position: absolute;
-  left: 50%;
-  width: 20px;
-  height: 2px;
-  background: currentColor;
-  border-radius: 999px;
-  transform-origin: center;
   transition: transform 0.25s ease, opacity 0.25s ease;
 }
 
-.menu-toggle span:nth-child(1) {
-  top: 14px;
-  transform: translateX(-50%);
-}
-
-.menu-toggle span:nth-child(2) {
-  top: 21px;
-  transform: translateX(-50%);
-}
-
-.menu-toggle span:nth-child(3) {
-  top: 28px;
-  transform: translateX(-50%);
-}
-
-.menu-toggle.is-open span:nth-child(1) {
-  top: 21px;
-  transform: translateX(-50%) rotate(45deg);
-}
-
-.menu-toggle.is-open span:nth-child(2) {
+.menu-toggle.is-open {
   opacity: 0;
 }
 
-.menu-toggle.is-open span:nth-child(3) {
-  top: 21px;
-  transform: translateX(-50%) rotate(-45deg);
-}
-
 .menu-overlay {
   position: fixed;
   inset: 0;
@@ -879,36 +833,6 @@ footer a:visited {
   column-gap: var(--spacing-4);
 }
 
-/* .footer-fade {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 320px;
-  background: linear-gradient(
-    to bottom,
-    hsla(0, 0%, 6%, 0) 0%,
-    hsla(0, 0%, 6%, 0.1) 13.6%,
-    hsla(0, 0%, 6%, 0.199) 24.8%,
-    hsla(0, 0%, 6%, 0.296) 33.8%,
-    hsla(0, 0%, 6%, 0.391) 41%,
-    hsla(0, 0%, 6%, 0.481) 46.8%,
-    hsla(0, 0%, 6%, 0.568) 51.5%,
-    hsla(0, 0%, 6%, 0.649) 55.4%,
-    hsla(0, 0%, 6%, 0.724) 58.8%,
-    hsla(0, 0%, 6%, 0.792) 62.2%,
-    hsla(0, 0%, 6%, 0.852) 65.9%,
-    hsla(0, 0%, 6%, 0.903) 70.1%,
-    hsla(0, 0%, 6%, 0.944) 75.3%,
-    hsla(0, 0%, 6%, 0.975) 81.8%,
-    hsla(0, 0%, 6%, 0.993) 89.9%,
-    hsl(0, 0%, 6%) 100%
-  );
-  pointer-events: none;
-  z-index: 10;
-} */
-
-
 /* =======================
    Helper classes
    ======================= */
@@ -1015,6 +939,10 @@ footer a:visited {
 }
 
 @media screen and (max-width:768px) {
+  .menu-bar {
+    padding: var(--spacing-5) var(--spacing-5) var(--spacing-4) var(--spacing-5);
+  }
+  
   main {
     padding: 0 var(--spacing-5) var(--spacing-4) var(--spacing-5);
   }
@@ -1028,13 +956,6 @@ footer a:visited {
 }
 
 @media screen and (max-width:440px) {
-  /* .footer-fixed {
-    position: unset;
-    left: unset;
-    right: unset;
-    bottom: unset;
-    z-index: unset;
-  } */
   .footer-links {
     flex-direction: column;
     row-gap: var(--spacing-4);
@@ -1051,6 +972,16 @@ footer a:visited {
   .site-header .menu-bar {
   padding: var(--spacing-5) var(--spacing-4) var(--spacing-4) var(--spacing-4);
   }
+  .menu-left, .menu-right {
+    gap: var(--spacing-3);
+  }
+  .desktop-nav-secondary ul {
+    gap: var(--spacing-3);
+  }
+  .menu-bar {
+    gap: var(--spacing-3);
+  }
+}
 
 @media print,
   (-webkit-min-device-pixel-ratio: 1.25),

index.html

@@ -50,6 +50,7 @@
         </nav>
       </div>
       
+      <div class="menu-right">
       <nav class="desktop-nav-secondary" aria-label="Secondary navigation">
         <ul>
           <li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
@@ -71,11 +72,10 @@
         aria-haspopup="true"
         aria-label="Open menu"
       >
-        <span></span>
-        <span></span>
-        <span></span>
+        Menu
       </button>
       </div>
+    </div>
   </header>
   
   <div class="menu-overlay" id="menuOverlay" hidden></div>
@@ -89,7 +89,7 @@
     <div class="mobile-menu__header">
       <strong>Menu</strong>
       <button class="menu-close" id="menuClose" type="button" aria-label="Close menu">
-        ✕
+        Close
       </button>
     </div>