diff --git a/src/common/header/HeaderNav.jsx b/src/common/header/HeaderNav.jsx
index a21947e07..3952f8af7 100644
--- a/src/common/header/HeaderNav.jsx
+++ b/src/common/header/HeaderNav.jsx
@@ -121,8 +121,16 @@ const HeaderNav = ({ showBrowse }) => {
       >
         <span className="navbar-toggler-icon" />
       </button>
-      <div className={showToggleMenu ? 'navbar-collapse show' : 'navbar-collapse'}>
-        <ul className="header-links" data-testid="header-links-container">
+      <div
+        className={showToggleMenu ? 'navbar-collapse show' : 'navbar-collapse'}
+        role="presentation"
+        onClick={() => setShowToggleMenu(false)}
+      >
+        <ul
+          className="header-links"
+          data-testid="header-links-container"
+          onClick={(e) => e.stopPropagation()}
+        >
           <li className="menu-closer">
             <button
               className="navbar-closer"
diff --git a/src/common/header/header.css b/src/common/header/header.css
index 8324afb53..c9ae6cbe2 100644
--- a/src/common/header/header.css
+++ b/src/common/header/header.css
@@ -101,6 +101,51 @@
   display: none;
 }
 
+@media screen and (max-width: 1217px) {
+  .navbar-collapse {
+    display: block !important;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .navbar-collapse:before {
+    content: '';
+    background-color: var(--color-neutral-90);
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 0;
+    opacity: 0;
+    cursor: pointer;
+    transition: opacity 0.3s ease;
+  }
+
+  .navbar-collapse .header-links {
+    transform: translateX(100%);
+    transition: transform 0.3s ease;
+  }
+
+  .navbar-collapse.show {
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  .navbar-collapse.show:before {
+    opacity: 60%;
+  }
+
+  .navbar-collapse.show .header-links {
+    transform: translateX(0);
+  }
+}
+
 @media (min-width: 1217px) {
   .navbar-toggler {
     display: none;
@@ -176,28 +221,7 @@
 }
 
 @media screen and (max-width: 1217px) {
-  .navbar-collapse.show {
-    display: block;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  .navbar-collapse.show:before {
-    content: '';
-    background-color: var(--color-neutral-90);
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 0;
-    opacity: 60%;
-  }
-
-  .navbar-collapse.show .header-links {
+  .navbar-collapse .header-links {
     position: absolute;
     top: 0;
     right: 0;
@@ -214,16 +238,13 @@
 
   .navbar-collapse.show .header-links {
     align-items: stretch;
+    grid-gap: 0.2rem;
   }
 
   .navbar-collapse .menu-closer {
     display: block;
   }
 
-  .navbar-collapse.show .header-links {
-    grid-gap: 0.2rem;
-  }
-
   .header-links > li.menu-spacer {
     margin: 0.4rem 0 1rem 0;
   }