Update nav.css

Author: weizhi-lin

assets/css/nav.css

@@ -1,65 +1,163 @@
-/* Fixed navigation bar at the top */
+
+/* Add a black background color to the top navigation */
 .topnav {
-    background-color: #ffffff; /* Sets background color to white */
+    background-color: #ffffff;
     overflow: hidden;
-    position: fixed;
-    z-index: 999;
-    width: 100%;
-    top: 0;  /* Aligns the nav to the very top */
-    margin: 0;  /* Removes any margin */
-    padding: 0 10px;  /* Adds padding to prevent overflow */
-    box-sizing: border-box; /* Ensures padding is within width */
+	  position:fixed;
+	  z-index:999;
+    width:100%;
+  }
+
+
+  .topnav #myLinks {
+    display: inline;
+  }
+
+.topnav a.icon {
+    display: none;
 }
 
-/* Links inside the navigation bar */
-.topnav a.normal {
-    color: #808080; /* Sets text color to grey */
+  .topnav img {
+    margin-bottom:0pt;
+    margin-top:10pt;
+    margin-left:30%;
+  }
+  
+  /* Style the links inside the navigation bar */
+  .topnav a.normal {
+    float: right;
+    color: #808080;
     text-align: center;
-    padding: 10px 15px; /* Adjust padding for spacing */
+    padding: 10px 9px;
     text-decoration: none;
     font-size: 17px;
-    display: inline-block; /* Ensures inline alignment */
-}
+  }
+  
+  /* Change the color of links on hover */
+  .topnav a.normal:hover {
+    background-color: #ddd;
+    color: black;
+  }
+  
+  /* Add a color to the active/current link */
+  .topnav a.right {
+    margin-right:30%;
+  }
 
-/* Hover effects for links */
-.topnav a.normal:hover {
-    background-color: #f0f0f0; /* Light grey background on hover */
-    color: #000000; /* Black text on hover */
-}
+  @media print, screen and (max-width: 1000px) { 
 
-/* Adjusts right margin for links */
-.topnav a.right {
-    margin-right: 0; /* Removes any excess margin */
-}
+    .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%;
+      }
 
-/* Mobile Styles */
-@media screen and (max-width: 960px) {
+   }
+
+   @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;
-        width: 100%;
-    }
+      }
+   }
 
-    .topnav.responsive #myLinks {
-        display: block;
-        width: 100%;
-        text-align: left;
-    }
+   @media print, screen and (max-width: 960px) { 
 
-    .topnav a.normal {
+    .topnav #myLinks {
+        display: none;
+      }
+
+      .topnav a.normal {
+        color: white;
+        float: none;
+        padding: 14px 16px;
+        text-decoration: none;
+        font-size: 17px;
         display: block;
-        text-align: left;
-    }
+      }
 
-    .topnav a.icon {
-        float: right;
+      .topnav a.icon {
+        color: white;
         display: block;
-    }
-}
+        padding: 10px 16px;
+        font-size: 17px;
+        position: absolute;
+        float: right;
+        right: 0;
+        top: 0;
+        margin-right:5%;
+      }
 
-/* Adjust image alignment inside the navigation bar */
-.topnav img {
-    margin: 0;
-    padding: 10px;
-    vertical-align: middle;
-    max-width: 100%;
-}
+      .topnav a.right {
+        color: white;
+        float: none;
+        padding: 14px 16px;
+        text-decoration: none;
+        font-size: 17px;
+        display: block;
+        margin-right:0;
+      }
+   }
+