diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 9871771542d..7a3fd2adfbb 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -529,7 +529,7 @@ $award-emoji-width-xs: 90%;
  */
 $search-input-border-color: rgba($blue-400, 0.8);
 $search-input-width: 200px;
-$search-input-active-width: 320px;
+$search-input-xl-width: 320px;
 $location-icon-color: #e7e9ed;
 
 /*
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 58e46cfb70f..74380ec995a 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -48,6 +48,10 @@ input[type='checkbox']:hover {
       background-color ease-in-out $default-transition-duration,
       width ease-in-out $default-transition-duration;
 
+    @include media-breakpoint-up(xl) {
+      width: $search-input-xl-width;
+    }
+
     &:hover {
       box-shadow: none;
     }
@@ -116,7 +120,7 @@ input[type='checkbox']:hover {
       overflow: auto;
 
       @include media-breakpoint-up(xl) {
-        width: $search-input-active-width;
+        width: $search-input-xl-width;
       }
     }
 
@@ -131,10 +135,6 @@ input[type='checkbox']:hover {
       border-color: $blue-300;
       box-shadow: none;
 
-      @include media-breakpoint-up(xl) {
-        width: $search-input-active-width;
-      }
-
       .search-input-wrap {
         .search-icon,
         .clear-icon {
diff --git a/changelogs/unreleased/fix-search-input-dropdown.yml b/changelogs/unreleased/fix-search-input-dropdown.yml
new file mode 100644
index 00000000000..a86f7eacfdb
--- /dev/null
+++ b/changelogs/unreleased/fix-search-input-dropdown.yml
@@ -0,0 +1,5 @@
+---
+title: Fix top-nav search bar dropdown on xl displays
+merge_request: 31864
+author: Kemais Ehlers
+type: fixed