Update nav.css

Author: weizhi-lin

assets/css/nav.css

@@ -1,163 +1,81 @@
-
-/* Add a black background color to the top navigation */
+/* Fixed top navigation bar */
 .topnav {
     background-color: #ffffff;
     overflow: hidden;
-	  position:fixed;
-	  z-index:999;
-    width:100%;
-  }
-
-
-  .topnav #myLinks {
-    display: inline;
-  }
+    position: fixed;
+    z-index: 999;
+    width: 100%;
+    top: 0; /* Aligns the navigation bar to the top */
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10px;
+    box-sizing: border-box;
+}
 
-.topnav a.icon {
-    display: none;
+/* Container for links, aligned to the left */
+.topnav #myLinks {
+    display: flex;
+    gap: 10px;
+    margin-left: 10px;
 }
 
-  .topnav img {
-    margin-bottom:0pt;
-    margin-top:10pt;
-    margin-left:30%;
-  }
-  
-  /* Style the links inside the navigation bar */
-  .topnav a.normal {
-    float: right;
+/* Links inside the navigation bar */
+.topnav a.normal {
     color: #808080;
-    text-align: center;
     padding: 10px 9px;
     text-decoration: none;
     font-size: 17px;
-  }
-  
-  /* Change the color of links on hover */
-  .topnav a.normal:hover {
+    display: inline-block;
+}
+
+/* Hover effect 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%;
-      }
+/* Hamburger icon for mobile */
+.topnav a.icon {
+    display: none; /* Hidden by default */
+    color: #808080;
+    font-size: 24px;
+    padding: 10px;
+}
 
-    .topnav a.right {
-        margin-right:3%;
-      }
+/* Image logo styling */
+.topnav img {
+    margin: 0;
+    padding: 10px;
+    vertical-align: middle;
+    max-height: 50px;
+}
 
-    .topnav a.normal {
-        padding: 10px 5px;
+/* Responsive design adjustments for mobile */
+@media screen and (max-width: 960px) {
+    .topnav {
+        flex-direction: column; /* Stacks items vertically */
+        align-items: flex-start; /* Aligns items to the left */
     }
 
-   }
-
-   @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) { 
-
     .topnav #myLinks {
-        display: none;
-      }
-
-      .topnav a.normal {
-        color: white;
-        float: none;
-        padding: 14px 16px;
-        text-decoration: none;
-        font-size: 17px;
-        display: block;
-      }
+        display: none; /* Hidden by default */
+        flex-direction: column; /* Stacks links vertically */
+        width: 100%; /* Full width for mobile */
+        background-color: #ffffff; /* White background for dropdown */
+    }
 
-      .topnav a.icon {
-        color: white;
-        display: block;
-        padding: 10px 16px;
-        font-size: 17px;
+    .topnav a.icon {
+        display: block; /* Shows the hamburger icon */
         position: absolute;
-        float: right;
-        right: 0;
-        top: 0;
-        margin-right:5%;
-      }
+        right: 10px;
+        top: 10px;
+    }
 
-      .topnav a.right {
-        color: white;
-        float: none;
-        padding: 14px 16px;
-        text-decoration: none;
-        font-size: 17px;
+    .topnav a.normal {
         display: block;
-        margin-right:0;
-      }
-   }
-   
+        width: 100%;
+        text-align: left; /* Aligns links to the left */
+        padding: 14px 16px;
+    }
+}