Update index.html

Added better mobile support

Author: mcgdj

index.html

@@ -30,7 +30,7 @@
 
       .menu-container a {
         text-decoration: none;
-        color: #ffffff; /* Changed for visibility */
+        color: #ffffff;
         transition: color 0.3s ease;
       }
 
@@ -51,7 +51,7 @@
       }
 
       /* Mobile Styles */
-      @media only screen and (max-width: 767px) { 
+      @media only screen and (max-width: 767px) {
         .menu-container {
           flex-direction: column;
           align-items: flex-start;
@@ -62,8 +62,8 @@
         }
 
         .menu {
+          display: none;
           width: 100%;
-          display: flex;
           flex-direction: column;
         }
 
@@ -76,15 +76,26 @@
           padding: 10px 0;
           text-align: center;
         }
+
+        /* Menu button */
+        .hamburger {
+          display: block;
+          font-size: 30px;
+          cursor: pointer;
+        }
       }
 
       /* Desktop Styles */
-      @media only screen and (min-width: 768px) { 
+      @media only screen and (min-width: 768px) {
         .menu {
           display: flex;
           justify-content: space-between;
           width: 100%;
         }
+
+        .hamburger {
+          display: none;
+        }
       }
     </style>
   </head>
@@ -95,6 +106,9 @@
         <img src="https://i.postimg.cc/6qgPbyGH/temp-Image-BJ164c.avif" alt="Coding Hut Logo"/>
       </a>
 
+      <!-- Menu for Mobile -->
+      <span class="hamburger" onclick="toggleMenu()">&#9776;</span>
+
       <!-- Menu Items -->
       <div class="menu">
         <ul>
@@ -112,5 +126,12 @@
     <h1 style="text-align:center;"><b>Coding Hut</b></h1>
     <h2 style="text-align:center;">Welcome to the official Coding Hut website.</h2>
     <p style="text-align:center;">Remember that Coding Hut was founded by @MyScratchedAccount on Dec. 27, 2022</p>
+
+    <script>
+      function toggleMenu() {
+        var menu = document.querySelector('.menu');
+        menu.style.display = menu.style.display === 'flex' ? 'none' : 'flex';
+      }
+    </script>
   </body>
 </html>