Fix top nav mobile styles

content/@theme/components/Navbar/Navbar.tsx

@@ -74,9 +74,15 @@ export function Navbar(props) {
         <TopNavCollapsible>
           <NavItems>
             {navItems}
-            <Search className="topnav-search" />
-            <LanguagePicker onChangeLanguage={changeLanguage} onlyIcon />
-            <StyledColorModeSwitcher />
+            <div id="topnav-search" className="nav-item search">
+              <Search className="topnav-search" />
+            </div>
+            <div id="topnav-language" className="nav-item">
+              <LanguagePicker onChangeLanguage={changeLanguage} onlyIcon />
+            </div>
+            <div id="topnav-theme" className="nav-item">
+              <StyledColorModeSwitcher />
+            </div>
           </NavItems>
         </TopNavCollapsible>
       </NavWrapper>

styles/_top-nav.scss

@@ -372,6 +372,22 @@ $nav-height: 80px;
       }
     }
 
+    .navbar-nav {
+      align-items: unset !important; // Undo "browser-entry.css" rule
+
+      #topnav-theme {
+        background-color: $gray-900;
+        padding: 1rem;
+      }
+      #topnav-search {
+        background-color: $gray-900;
+
+        [data-component-name="Search/MobileSearchTrigger"] {
+          padding: 2rem;
+          cursor: pointer;
+        }
+      }
+    }
     .navbar-nav .nav-link,
     .navbar-collapse > .nav-item {
       line-height: 150%;

styles/light/_light-theme.scss

@@ -397,10 +397,7 @@ a.card:hover,
       color: $gray-600;
     }
 
-    .col-for-popular-pages,
-    .col-for-人気ページ,
-    .col-for-questions,
-    .col-for-質問 {
+    .col-for-get_started{
       background-color: $gray-200;
     }
   }
@@ -419,7 +416,9 @@ a.card:hover,
     }
 
     .navbar-nav .nav-link,
-    .navbar-collapse>.nav-item {
+    .navbar-collapse>.nav-item,
+    .navbar-nav #topnav-theme,
+    .navbar-nav #topnav-search {
       background: $gray-200;
     }
   }