hamburger sidebar menu option on the top instead of middle

Author: Prasoon52

Landing Page/index.html

@@ -21,12 +21,13 @@
             transform: scaleX(1);
         }
 
-        /* --- CSS FOR MOBILE SIDEBAR (CENTER-ALIGNED) --- */
+        /* --- CSS FOR MOBILE SIDEBAR (TOP-RIGHT ALIGNED) --- */
 
         @media (max-width: 767px) {
             .nav-links {
                 position: fixed;
                 top: 0;
+                /* MODIFICATION 1: Position back to the right edge */
                 right: 0; 
                 height: 100vh;
                 width: 75%; 
@@ -36,27 +37,30 @@
                 display: flex;
                 flex-direction: column;
 
-                /* MODIFICATION 1: Align items to the center */
-                align-items: center; 
+                /* MODIFICATION 2: Align items to the start (left) of the sidebar */
+                align-items: flex-start; 
 
-                justify-content: center;
+                /* MODIFICATION 3: Justify content to the start (top) */
+                justify-content: flex-start;
 
-                /* MODIFICATION 2: Removed right-side padding */
+                /* MODIFICATION 4: Add padding for spacing */
+                padding-top: 5rem;
+                padding-left: 2rem;
 
+                /* MODIFICATION 5: Change transform back to horizontal slide */
                 transform: translateX(100%);
                 transition: transform 0.3s ease-in-out;
             }
 
             #menu-toggle:checked ~ .nav-links {
+                /* MODIFICATION 6: Show menu by sliding it in from the right */
                 transform: translateX(0);
             }
 
             .nav-links li {
-                width: 80%; /* Set width for the separator line */
-                
-                /* MODIFICATION 3: Align text to the center */
-                text-align: center; 
-                
+                width: 80%;
+                /* MODIFICATION 7: Align text to the left for readability */
+                text-align: left; 
                 padding-bottom: 0.75rem;
                 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
             }