Update nav.css

Author: weizhi-lin

assets/css/nav.css

@@ -1,143 +1,52 @@
-/* Add a black background color to the top navigation */
+/* Fixed navigation bar at the top */
 .topnav {
     background-color: #13294B;
     overflow: hidden;
-	  position:fixed;
-	  z-index:999;
-    width:100%;
-  }
-
-
-  .topnav #myLinks {
-    display: inline;
-  }
-
-.topnav a.icon {
-    display: none;
+    position: fixed;
+    z-index: 999;
+    width: 100%;
+    top: 0;  /* Aligns the nav to the very top */
+    margin: 0;  /* Removes any margin */
+    padding: 0;  /* Removes any padding */
 }
 
-  .topnav img {
-    margin-bottom:0pt;
-    margin-top:10pt;
-    margin-left:30%;
-  }
-  
-  /* Style the links inside the navigation bar */
-  .topnav a.normal {
+/* Links inside the navigation bar */
+.topnav a.normal {
     float: right;
     color: #f2f2f2;
     text-align: center;
     padding: 10px 9px;
     text-decoration: none;
     font-size: 17px;
-  }
-  
-  /* Change the color of links on hover */
-  .topnav a.normal:hover {
+}
+
+/* Hover effects for links */
+.topnav a.normal:hover {
     background-color: #ddd;
     color: black;
-  }
-  
-  /* Add a color to the active/current link */
-  .topnav a.right {
-    margin-right:30%;
-  }
-
-  @media print, screen and (max-width: 1000px) { 
-
-    .topnav img {
-        margin-left:3%;
-      }
-
-    .topnav a.right {
-        margin-right:3%;
-      }
-
-    .topnav a.normal {
-        padding: 10px 5px;
-    }
-
-   }
-
-   @media print, screen and (max-width: 1200px) and (min-width: 1001px) { 
-
-    .topnav img {
-        margin-left:6%;
-      }
-    .topnav a.right {
-        margin-right:6%;
-      }
-
-   }
-
-   @media print, screen and (max-width: 1400px) and (min-width: 1201px) { 
-
-    .topnav img {
-        margin-left:12%;
-      }
-    .topnav a.right {
-        margin-right:12%;
-      }
-
-      }
-
-
-   @media print, screen and (max-width: 1600px) and (min-width: 1401px) { 
-
-    .topnav img {
-        margin-left:16%;
-      }
-    .topnav a.right {
-        margin-right:16%;
-      }
-
-   }
-
-   @media print, screen and (max-width: 1800px) and (min-width: 1601px) { 
-
-    .topnav img {
-        margin-left:19%;
-      }
-    .topnav a.right {
-        margin-right:19%;
-      }
-
-   }
-
-   @media print, screen and (max-width: 2000px) and (min-width: 1801px) { 
-
-    .topnav img {
-        margin-left:22%;
-      }
-    .topnav a.right {
-        margin-right:22%;
-      }
-
-   }
-
-  
-   @media print, screen and (max-width: 480px) { 
-    .topnav #myLinks {
-        display: none;
-      }
-   }
+}
 
-   @media print, screen and (max-width: 960px) { 
+/* Adjusts the right margin for alignment */
+.topnav a.right {
+    margin-right: 0;
+}
 
+/* Responsive design adjustments */
+@media screen and (max-width: 960px) {
     .topnav #myLinks {
         display: none;
-      }
+    }
 
-      .topnav a.normal {
+    .topnav a.normal {
         color: white;
         float: none;
         padding: 14px 16px;
         text-decoration: none;
         font-size: 17px;
         display: block;
-      }
+    }
 
-      .topnav a.icon {
+    .topnav a.icon {
         color: white;
         display: block;
         padding: 10px 16px;
@@ -146,17 +55,24 @@
         float: right;
         right: 0;
         top: 0;
-        margin-right:5%;
-      }
+        margin-right: 5%;
+    }
 
-      .topnav a.right {
+    .topnav a.right {
         color: white;
         float: none;
         padding: 14px 16px;
         text-decoration: none;
         font-size: 17px;
         display: block;
-        margin-right:0;
-      }
-   }
-   
+        margin-right: 0;
+    }
+}
+
+/* Adjust image alignment inside the navigation bar */
+.topnav img {
+    margin: 0;  /* Removes any vertical margin */
+    margin-left: 0; /* Removes the left margin */
+    padding: 10px; /* Adds padding for spacing */
+    vertical-align: middle;  /* Aligns image vertically */
+}