Dropdown menu for mobile rendering

Author: DrWatt

header.html

@@ -8,13 +8,14 @@ <h3 id="h3head" class="header2-title" >Bringing Quantum Technologies to HEP</h3>
             </div>
 
         </div>
-        <nav>
-            <ul>
+        <nav class="navbar">
+            <ul class="nav-links">
                 <li><a href="index.html">Home</a></li>
                 <li><a href="projects.html">Projects</a></li>
                 <li><a href="peoples.html">Peoples</a></li>
                 <li><a href="future.html">Future Ideas</a></li>
                 <li><a href="https://github.com/Quantum4HEP">Github Repository</a></li>
             </ul>
+            <button class="menu-toggle" aria-label="Open menu">☰</button>
         </nav>
     </header>

script.js

@@ -25,6 +25,9 @@ async function loadHeader() {
 
             lastScrollTop = scrollTop;
         });
+        document.querySelector(".menu-toggle").addEventListener("click", function () {
+    document.querySelector(".nav-links").classList.toggle("show");
+  });
     } catch (error) {
         console.error("Error loading header:", error);
     }

styles.css

@@ -91,23 +91,23 @@ header h1 {
     color: #fff;
 }
 
-nav ul {
+.nav-links {
     list-style: none;
     display: flex;
     justify-content: center;
 }
 
-nav ul li {
+.nav-links li {
     margin: 0 1rem;
 }
 
-nav ul li a {
+.nav-links li a {
     color: #fff;
     text-decoration: none;
     font-weight: bold;
 }
 
-nav ul li a:hover {
+.nav-links li a:hover {
     color: #ffb000;
 }
 
@@ -197,16 +197,74 @@ a:hover {
 
 }
 /* Responsive Design */
+
+.menu-toggle {
+  display: none; /* Hidden by default */
+  font-size: 1.5rem;
+  background: none;
+  border: none;
+  color: white;
+  cursor: pointer;
+}
+
 @media (max-width: 768px) {
-    nav ul {
-        flex-direction: column;
+    .nav-links {
+    display: none; /* Hide links by default on mobile */
+    flex-direction: column;
+    position: absolute;
+    top: 100px;
+    left: 0px;
+    background-color: #333;
+    padding: 1rem;
+    width: 150px;
+    border-radius: 5px;
+    background-color: #0a0316;
     }
-
-    nav ul li {
+    .nav-links.show {
+    display: flex; /* Show menu when toggled */
+  }
+    .nav-links li {
         margin: 0.5rem 0;
     }
-
+    .menu-toggle {
+    display: block; /* Show the toggle button on mobile */
+  }
+  header {
+    width: 100%;
+    background-color: #0a0316;
+    color: #fff;
+    text-align: center;
+    justify-content: space-between;
+    align-items: center;
+    transition: padding 0.8s ease, font-size 0.8s ease;
+    z-index: 56;
+    padding: 10px 10px;
+}
+header h1 {
+    font-size: 18px;
+}
+header h3 {
+    font-size: 0px;
+}
+header .header-image{
+    width: 50px;           /* Set a fixed width for the image */
+    height: auto;          /* Maintain aspect ratio */
+    margin-right: 10px;  /* Space between image and heading */
+    padding: 0.3rem 0;
+}
     main {
         padding: 1rem;
     }
+    .header-small {
+         width: 100%;
+    background-color: #0a0316;
+    color: #fff;
+    text-align: center;
+    justify-content: space-between;
+    align-items: center;
+    transition: padding 0.8s ease, font-size 0.8s ease;
+    z-index: 56;
+    padding: 10px 10px;
+
+    }
 }