Update nav.css

Author: weizhi-lin

assets/css/nav.css

@@ -54,6 +54,12 @@
 
 /* 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: 5px 8px; /* Reduces padding for a thinner bar */
+    }
+
     .topnav #myLinks {
         display: none; /* Hidden by default on mobile */
         flex-direction: column; /* Stacks links vertically */
@@ -63,20 +69,20 @@
 
     .topnav a.icon {
         display: block; /* Shows the hamburger icon on mobile */
-        font-size: 16px;
+        font-size: 15px; /* Slightly smaller font size */
         color: #808080;
-        padding: 6px 10px; /* Adds padding on the right */
+        padding: 5px 8px; /* Further reduces padding for a thinner icon */
         cursor: pointer;
         margin-left: auto; /* Pushes the icon to the right */
-        margin-right: 10px; /* Adds space from the right edge */
+        margin-right: 8px; /* Adds space from the right edge */
         order: 1; /* Ensures the icon appears last in the flex container */
     }
 
     .topnav a.normal {
         display: block;
         width: 100%;
         text-align: left; /* Aligns links to the left */
-        padding: 8px 10px;
+        padding: 6px 8px; /* Further reduces padding for slimmer links */
         background-color: #ffffff; /* White background for links */
         color: #808080; /* Grey text color for links */
     }