diff --git a/src/components/layout/header/header.tsx b/src/components/layout/header/header.tsx
index 17f27d027..6f18582eb 100644
--- a/src/components/layout/header/header.tsx
+++ b/src/components/layout/header/header.tsx
@@ -77,21 +77,22 @@ const SiteTitle = styled(Link)<{ $lightTheme: boolean }>`
 const SiteMenu = styled.button<{ $lightTheme: boolean }>`
   all: unset;
   cursor: pointer;
-  z-index: ${FLYOUT_Z_INDEX};
+  z-index: ${FLYOUT_Z_INDEX + 1};
 
+  display: grid;
+  place-items: center;
   /**
    * to make it simpler to click (especially on mobile),
    * we make the button extra large
    */
-  height: 16px;
-  width: 35px;
-  text-align: right;
-  margin-right: -${() => GRID_GAP_MOBILE};
-  padding-right: ${() => GRID_GAP_MOBILE};
+  height: calc(12px + ${() => GRID_GAP_MOBILE});
+  width: calc(12px + ${() => GRID_GAP_MOBILE});
+  transform: translateY(calc(${() => GRID_GAP_MOBILE} / 2));
 
   ${up('md')} {
-    margin-right: -${() => GRID_GAP_DESKTOP};
-    padding-right: ${() => GRID_GAP_DESKTOP};
+    height: calc(12px + ${() => GRID_GAP_DESKTOP});
+    width: calc(12px + ${() => GRID_GAP_DESKTOP});
+    transform: translateY(calc(${() => GRID_GAP_DESKTOP} / 2));
   }
 
   .bar {
diff --git a/src/components/legacy/icons/header-icons/burger-menu.tsx b/src/components/legacy/icons/header-icons/burger-menu.tsx
index 687999a85..fef9d45a0 100644
--- a/src/components/legacy/icons/header-icons/burger-menu.tsx
+++ b/src/components/legacy/icons/header-icons/burger-menu.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
-import { GRID_GAP_DESKTOP, GRID_GAP_MOBILE } from '../../../layout/theme';
-import { up } from '../../../support/breakpoint';
 
 interface BurgerMenuProps {
   transition: boolean;
   setHoverTransition: () => void;
 }
+
 export const BurgerMenu = ({
   transition,
   setHoverTransition,
@@ -21,22 +20,16 @@ export const BurgerMenu = ({
 };
 
 const Wrapper = styled.div<{ $transition: boolean }>`
+  height: 12px;
+  width: 12px;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  padding: 3px 0px;
-
-  margin-right: -${() => GRID_GAP_MOBILE};
-  padding-right: ${() => GRID_GAP_MOBILE};
-
-  ${up('md')} {
-    margin-right: -${() => GRID_GAP_DESKTOP};
-    padding-right: ${() => GRID_GAP_DESKTOP};
-  }
+  justify-content: center;
+  gap: 2px;
 
   .bar {
     height: 2px;
-    margin-bottom: 2px;
     background-color: white;
     border-radius: 2px;
   }