Update nav.css

Author: weizhi-lin

assets/css/nav.css

@@ -52,44 +52,42 @@
     max-height: 50px;
 }
 
+
 /* Responsive design adjustments for mobile */
 @media print, screen and (max-width: 960px) {
     .topnav {
         flex-direction: column; /* Stacks items vertically */
         align-items: flex-start; /* Aligns items to the left */
         padding: 0; /* Removes all padding */
-        margin: 0; /* Removes all margins */
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Adds shadow */
+        margin: 0; /* Removes all margin */
+        margin-left:0;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Adds a shadow below the bar */
         width: 100%; /* Ensures full width */
     }
 
+    .topnav #myLinks {
+        display: none; /* Hidden by default on mobile */
+    }
+
     .topnav a.icon {
+        float: none;
         display: block; /* Shows the hamburger icon on mobile */
-        font-size: 16px; /* Adjust font size */
-        background-color: #808080; /* Background color for better visibility */
-        color: #ffffff; /* White color for icon */
-        padding: 8px; /* Adds padding for better touch area */
-        margin: 0; /* Removes margin */
+        font-size: 14px; /* Slightly smaller font size */
+        background-color: #808080;
+        color: #ffffff; /* White text for better contrast */
+        padding: 6px 10px; /* Minimal padding for a thinner icon */
+        margin: 0; /* Removes all margins */
+        cursor: pointer;
         border-radius: 0; /* Removes rounded edges */
-        align-self: stretch; /* Stretches to fill the container */
-        box-sizing: border-box; /* Includes padding in width calculation */
-        width: 50px; /* Sets a fixed width for the icon */
-    }
-
-    .topnav #myLinks {
-        display: none; /* Hidden by default on mobile */
-        flex-direction: column; /* Stacks links vertically */
-        width: 100%; /* Full width for mobile */
-        background-color: #f0f0f0; /* Light grey background for the dropdown */
-        margin: 0; /* Removes any margin */
-        padding: 0; /* Removes any padding */
+        align-self: flex-start; /* Aligns the icon to the left */
+        width: 100%; /* Ensures full width for the icon */
     }
 
     .topnav a.normal {
         display: block;
         width: 100%;
         text-align: left; /* Aligns links to the left */
-        padding: 8px 10px; /* Reduced padding for thinner bar */
+        padding: 8px 10px; /* Reduces padding for a thinner bar */
         background-color: #ffffff; /* White background for links */
         color: #808080; /* Grey text color for links */
     }