Fixed hamburger menu in component category pages

assets/html_files/about.html

@@ -44,7 +44,7 @@
                 <li class="nav-item">
                     <a href="../html_files/contributor.html" class="nav-link"><i class="fa-solid fa-user"></i> Contributors</a>
                 </li>
-                <li>
+                <li class="nav-item">
                     <a href="contact.html" class="nav-link"><i class="fa-solid fa-phone"></i> Contact</a>
                 </li>
                 <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>

assets/html_files/accordions.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" type="text/css" href="../css_files/accordions.css" />
     <link rel="stylesheet" href="../css_files/search.css">
     <script src="../js_files/commonnav.js"></script>
+    <script src="../js_files/hamburgerMenu.js"></script>
     <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <title>Beautiify | Accordions</title>
 </head>
@@ -44,7 +45,7 @@
                 <li class="nav-item">
                     <a href="../html_files/contributor.html" class="nav-link"><i class="fa-solid fa-user"></i> Contributors</a>
                 </li>
-                <li>
+                <li class="nav-item">
                     <a href="contact.html" class="nav-link"><i class="fa-solid fa-phone"></i> Contact</a>
                 </li>
                 <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
@@ -188,6 +189,7 @@ <h1>Simple Accordion</h1>
     <script src="../../script.js"></script>
 
 
+
 </body>
 
 </html>

assets/html_files/backgrounds.html

@@ -44,7 +44,7 @@
                 <li class="nav-item">
                     <a href="../html_files/contributor.html" class="nav-link"><i class="fa-solid fa-user"></i> Contributors</a>
                 </li>
-                <li>
+                <li class="nav-item">
                     <a href="contact.html" class="nav-link"><i class="fa-solid fa-phone"></i> Contact</a>
                 </li>
                 <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>

assets/html_files/breadcrumbs.html

@@ -44,7 +44,7 @@
                 <li class="nav-item">
                     <a href="../html_files/contributor.html" class="nav-link"><i class="fa-solid fa-user"></i> Contributors</a>
                 </li>
-                <li>
+                <li class="nav-item">
                     <a href="contact.html" class="nav-link"><i class="fa-solid fa-phone"></i> Contact</a>
                 </li>
                 <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>

assets/html_files/buttons.html

@@ -44,7 +44,7 @@
                 <li class="nav-item">
                     <a href="../html_files/contributor.html" class="nav-link"><i class="fa-solid fa-user"></i> Contributors</a>
                 </li>
-                <li>
+                <li class="nav-item">
                     <a href="contact.html" class="nav-link"><i class="fa-solid fa-phone"></i> Contact</a>
                 </li>
                 <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>

assets/html_files/cards.html

@@ -44,7 +44,7 @@
                 <li class="nav-item">
                     <a href="../html_files/contributor.html" class="nav-link"><i class="fa-solid fa-user"></i> Contributors</a>
                 </li>
-                <li>
+                <li class="nav-item">
                     <a href="contact.html" class="nav-link"><i class="fa-solid fa-phone"></i> Contact</a>
                 </li>
                 <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>

assets/html_files/carousels.html

@@ -44,7 +44,7 @@
                 <li class="nav-item">
                     <a href="../html_files/contributor.html" class="nav-link"><i class="fa-solid fa-user"></i> Contributors</a>
                 </li>
-                <li>
+                <li class="nav-item">
                     <a href="contact.html" class="nav-link"><i class="fa-solid fa-phone"></i> Contact</a>
                 </li>
                 <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>

assets/html_files/contact.html

@@ -49,7 +49,7 @@
                 <li class="nav-item">
                     <a href="../html_files/contributor.html" class="nav-link"><i class="fa-solid fa-user"></i> Contributors</a>
                 </li>
-                <li>
+                <li class="nav-item">
                     <a href="contact.html" class="nav-link" style="color: red;"><i class="fa-solid fa-phone"></i> Contact</a>
                 </li>
                 <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>

assets/html_files/contributor.html

@@ -44,7 +44,7 @@
                 <li class="nav-item">
                     <a href="../html_files/contributor.html" class="nav-link" style="color: red;"><i class="fa-solid fa-user"></i> Contributors</a>
                 </li>
-                <li>
+                <li class="nav-item"> 
                     <a href="contact.html" class="nav-link"><i class="fa-solid fa-phone"></i> Contact</a>
                 </li>
                 <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>

assets/html_files/dropdowns.html

@@ -44,7 +44,7 @@
                 <li class="nav-item">
                     <a href="../html_files/contributor.html" class="nav-link"><i class="fa-solid fa-user"></i> Contributors</a>
                 </li>
-                <li>
+                <li class="nav-item">
                     <a href="contact.html" class="nav-link"><i class="fa-solid fa-phone"></i> Contact</a>
                 </li>
                 <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>

assets/html_files/footers.html

@@ -44,7 +44,7 @@
                 <li class="nav-item">
                     <a href="../html_files/contributor.html" class="nav-link"><i class="fa-solid fa-user"></i> Contributors</a>
                 </li>
-                <li>
+                <li class="nav-item">
                     <a href="contact.html" class="nav-link"><i class="fa-solid fa-phone"></i> Contact</a>
                 </li>
                 <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>

assets/html_files/forms.html

@@ -44,7 +44,7 @@
                 <li class="nav-item">
                     <a href="../html_files/contributor.html" class="nav-link"><i class="fa-solid fa-user"></i> Contributors</a>
                 </li>
-                <li>
+                <li class="nav-item">
                     <a href="contact.html" class="nav-link"><i class="fa-solid fa-phone"></i> Contact</a>
                 </li>
                 <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>

assets/html_files/loaders.html

@@ -44,7 +44,7 @@
                 <li class="nav-item">
                     <a href="../html_files/contributor.html" class="nav-link"><i class="fa-solid fa-user"></i> Contributors</a>
                 </li>
-                <li>
+                <li class="nav-item">
                     <a href="contact.html" class="nav-link"><i class="fa-solid fa-phone"></i> Contact</a>
                 </li>
                 <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>

assets/html_files/navigation-bars.html

@@ -44,7 +44,7 @@
                 <li class="nav-item">
                     <a href="../html_files/contributor.html" class="nav-link"><i class="fa-solid fa-user"></i> Contributors</a>
                 </li>
-                <li>
+                <li class="nav-item">
                     <a href="contact.html" class="nav-link"><i class="fa-solid fa-phone"></i> Contact</a>
                 </li>
                 <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>

assets/html_files/search-bars.html

@@ -44,7 +44,7 @@
                 <li class="nav-item">
                     <a href="../html_files/contributor.html" class="nav-link"><i class="fa-solid fa-user"></i> Contributors</a>
                 </li>
-                <li>
+                <li class="nav-item">
                     <a href="contact.html" class="nav-link"><i class="fa-solid fa-phone"></i> Contact</a>
                 </li>
                 <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>

assets/html_files/text-animations.html

@@ -44,7 +44,7 @@
                 <li class="nav-item">
                     <a href="../html_files/contributor.html" class="nav-link"><i class="fa-solid fa-user"></i> Contributors</a>
                 </li>
-                <li>
+                <li class="nav-item">
                     <a href="contact.html" class="nav-link"><i class="fa-solid fa-phone"></i> Contact</a>
                 </li>
                 <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>

assets/html_files/transfer-lists.html

@@ -44,7 +44,7 @@
                 <li class="nav-item">
                     <a href="../html_files/contributor.html" class="nav-link"><i class="fa-solid fa-user"></i> Contributors</a>
                 </li>
-                <li>
+                <li class="nav-item">
                     <a href="contact.html" class="nav-link"><i class="fa-solid fa-phone"></i> Contact</a>
                 </li>
                 <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>

assets/js_files/hamburgerMenu.js

@@ -0,0 +1,16 @@
+const hamburger = document.querySelector(".hamburger");
+const navMenu = document.querySelector(".nav-menu");
+
+hamburger.addEventListener("click", mobileMenu);
+function mobileMenu() {
+    hamburger.classList.toggle("active");
+    navMenu.classList.toggle("active");
+}
+
+const navLink = document.querySelectorAll(".nav-link");
+navLink.forEach(n => n.addEventListener("click", closeMenu));
+
+function closeMenu() {
+    hamburger.classList.remove("active");
+    navMenu.classList.remove("active");
+}

index.html

@@ -268,6 +268,7 @@ <h2>Transfer Lists</h2>
     <script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
     <script src="https://mediafiles.botpress.cloud/c49225f4-f243-440f-a8ab-9ef97d82964b/webchat/config.js" defer></script>
     <script src="./script.js"></script>
+    <script src="./assets/js_files/hamburgerMenu.js"></script>
     <script src="./assets/js_files/contributor.js"></script>
 
 </body>

script.js

@@ -1,26 +1,9 @@
-const hamburger = document.querySelector(".hamburger");
-const navMenu = document.querySelector(".nav-menu");
-
 document.addEventListener("DOMContentLoaded", function() {
     setTimeout(function() {
         document.querySelector("body").classList.add("loaded");
     }, 500)
 });
 
-hamburger.addEventListener("click", mobileMenu);
-function mobileMenu() {
-    hamburger.classList.toggle("active");
-    navMenu.classList.toggle("active");
-}
-
-const navLink = document.querySelectorAll(".nav-link");
-navLink.forEach(n => n.addEventListener("click", closeMenu));
-
-function closeMenu() {
-    hamburger.classList.remove("active");
-    navMenu.classList.remove("active");
-}
-
 let calcScrollValue = () => {
     let scrollProg = document.getElementById("progress");
     let pos = document.documentElement.scrollTop;

style.css

@@ -838,10 +838,11 @@ footer p a {
 
     .nav-menu.active {
         left: 0;
+        gap: 10px;
     }
 
     .nav-item {
-        margin: 2.5rem 0;
+        margin: 1.7rem 0;
         font-size: 21px;
     }