Attempted to make the nav bar closer in style to the old beta site / current main site. Adjusted the font weights, the size and position of the search bar, and the nav bar on the right. Also made the <li> tags for the curriculum and forum buttons clickable and change styles when hovered over, just like on the main freecodecamp.org site.

Partially solves https://github.com/freeCodeCamp/freeCodeCamp/issues/17266

packages/learn/src/components/Header/header.css

@@ -8,7 +8,7 @@ header {
 #top-nav {
   background: #006400;
   margin-bottom: 0.45rem;
-  height: 38px;
+  height: 36px;
   margin-bottom: 0px;
   border-radius: 0;
   border: none;
@@ -17,12 +17,6 @@ header {
   padding: 0 30px 0 15px;
 }
 
-@media screen, (max-width: 630px) {
-  #top-nav {
-    padding: 0;
-  }
-}
-
 #top-nav .home-link {
   display: flex;
   align-items: center;
@@ -31,12 +25,12 @@ header {
 #top-nav img {
   max-height: 25px;
   min-width: 35px;
-  margin: 0 5px 0 10px;
+  margin: 0 5px 0 15px;
 }
 
 #top-right-nav {
   display: flex;
-  width: 270px;
+  width: auto;
   margin: 0;
   list-style: none;
   justify-content: space-around;
@@ -62,12 +56,20 @@ header {
   justify-content: center;
   align-items: center;
   height: 100%;
-  margin: 0 3px;
+  margin: 0;
+}
+
+#top-right-nav > li > a {
+  padding: 10px 15px;
+}
+
+.sign-in-btn {
+  padding: 10px 0 10px 15px;
 }
 
 #top-right-nav li > a, #top-right-nav li > span {
-  color:#fff;
+  color:#eee;
-  font-size: 17px;
+  font-size: 15px;
   font-weight: 500;
 }
 
@@ -76,6 +78,14 @@ header {
   font-weight: 500;
 }
 
+.nav-btn:hover {
+  background-color: #eee;
+}
+
+#top-right-nav .nav-btn a:hover {
+  color: darkgreen;
+}
+
 .user-state-spinner {
   height: 40px;
 }
@@ -86,8 +96,12 @@ header {
 
 /* Search bar */
 .fcc_searchBar {
-  flex-grow: 0.8;
+  flex-grow: 0.4;
-  padding: 2px 10px 0;
+  padding: 3px 10px 0;
+  margin-right: auto;
+}
+#fcc_instantsearch {
+  max-height: 30px;
 }
 .ais-SearchBox-form {
   margin-bottom: 0;

packages/learn/src/components/Header/index.js

@@ -16,15 +16,15 @@ function Header() {
         </a>
         <FCCSearch />
         <ul id='top-right-nav'>
-          <li>
+          <li className='nav-btn'>
             <Link to='/'>Curriculum</Link>
           </li>
-          <li>
+          <li className='nav-btn'>
             <a href='https://forum.freecodecamp.org' target='_blank'>
               Forum
             </a>
           </li>
-          <li>
+          <li className='sign-in-btn'>
             <UserState />
           </li>
         </ul>