Merge branch '47504-mobile-nav' into 'master'

Resolve "Navbar is broken on mobile"

Closes #47504

See merge request gitlab-org/gitlab-ce!19550

app/assets/stylesheets/framework/header.scss

@@ -139,6 +139,8 @@
     }
 
     .nav {
+      flex-wrap: nowrap;
+
       > li:not(.d-none) a {
         @include media-breakpoint-down(xs) {
           margin-left: 0;
@@ -158,11 +160,12 @@
     }
 
     .navbar-toggler {
+      position: relative;
       right: -10px;
       border-radius: 0;
       min-width: 45px;
       padding: 0;
-      margin-right: -7px;
+      margin: $gl-padding-8 -7px $gl-padding-8 0;
       font-size: 14px;
       text-align: center;
       color: currentColor;
@@ -186,6 +189,7 @@
         display: -webkit-flex;
         display: flex;
         padding-right: 10px;
+        flex-direction: row;
       }
 
       li {
@@ -290,6 +294,10 @@
       margin: 8px;
     }
   }
+
+  .dropdown-menu {
+    position: absolute;
+  }
 }
 
 .navbar-sub-nav {