test new navigation bar

Author: fraolBatole

_includes/header.html

@@ -1,22 +1,31 @@
 <header>
-
   <div class="brand-bg-color">
     <div class="container">
       <div class="brand-navbar">
         <div class="row">
           <div class="flex-separate col-12">
             <a href="/" class="nav-link">
-<img src="/img/tulane-sse-logo.png" alt="Tulane School of Science and Engineering" id="header-logo"
-     style="height: 60px; margin: 10px 0; background-color: white; padding: 5px; border-radius: 4px;"/>
+              <img src="/img/tulane-sse-logo.png" alt="Tulane School of Science and Engineering" id="header-logo"
+                   style="height: 60px; margin: 10px 0; background-color: white; padding: 5px; border-radius: 4px;"/>
             </a>
+            <!-- Move the navigation links here -->
+            <div class="navbar-nav d-none d-sm-flex" style="color: white;">
+              <a class="nav-item nav-link" href="/projects.html">Projects</a>
+              <a class="nav-item nav-link" href="/papers/">Papers</a>
+              <a class="nav-item nav-link" href="/grants/">Grants</a>
+              <a class="nav-item nav-link" href="/news/">News</a>
+              <a class="nav-item nav-link" href="/people.html">People</a>
+              <a class="nav-item nav-link" href="/about/">About</a>
+            </div>
             <button class="navbar-toggler d-block d-sm-none" type="button" data-toggle="collapse" data-target="#collapseNav">&#9776;</button>
           </div>
         </div>
       </div>
     </div>
   </div>
 
-  <div class="nav-bg-color">
+  <!-- Mobile navigation menu (only shows when collapsed) -->
+  <div class="nav-bg-color d-sm-none">
     <nav class="container navbar navbar-dark navbar-expand-sm">
       <div class="collapse navbar-collapse" id="collapseNav">
         <div class="navbar-nav">
@@ -30,5 +39,4 @@
       </div>
     </nav>
   </div>
-
 </header>

css/design.scss

@@ -29,7 +29,7 @@ body {
 }
 
 .brand-bg-color {
-  background-color: #006747;
+  background-color: #21543E;
   padding-top: 0.5rem;
 }
 
@@ -71,11 +71,13 @@ body {
 
 .navbar .navbar-nav .nav-link {
   margin: 0;
-  color: #444;
+  // color: #444;
   font-weight: lighter;
   text-align: left;
   width: 100%;
-  padding-left: 1em;
+  // padding-left: 1em;
+  color: white !important;
+  padding: 0 15px;
 }
 
 /* Note: Update width when changing the nav links */