diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss
index a5d643cc6..f4afb1be1 100644
--- a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss
+++ b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss
@@ -24,8 +24,7 @@
     display: flex;
     align-items: center;
     height: fit-content;
-    padding-left: 1rem;
-    padding-right: 1rem;
+    padding: 0.5rem 1rem;
   }
 
   :focus-visible {
@@ -34,8 +33,6 @@
 
   // These items will define the height of the header
   .navbar-item {
-    height: var(--pst-header-height);
-    max-height: var(--pst-header-height);
     display: flex;
     align-items: center;
   }
@@ -49,6 +46,8 @@
       display: inherit;
       flex-grow: 1;
       padding: 0 0 0 0.5rem;
+      flex-wrap: wrap;
+      row-gap: 0.5rem;
     }
   }
 
@@ -57,7 +56,7 @@
   .navbar-header-items__start {
     display: flex;
     align-items: center;
-    flex-flow: wrap;
+    flex-flow: nowrap;
 
     // In case we wrap our items to multiple rows on small screens
     row-gap: 0;
@@ -83,6 +82,7 @@
   // Contains the navigation links within the navbar
   .navbar-nav {
     display: flex;
+    flex-wrap: wrap;
 
     @include media-breakpoint-up($breakpoint-sidebar-primary) {
       // Center align on wide screens so the dropdown button is centered properly