Fixed navbar at top and add hamburger menu for mobile screen

assets/css/style.css

@@ -22,11 +22,13 @@ body {
 
 /* CSS for Light-Dark Theme SWITCH */
 .theme-toggle {
-  position: relative;
+  position: fixed;
   width: 40px;
   height: 20px;
-  margin-left: 0 5px;
-  left: -10px;
+  top: 1rem;
+  left: 1rem;
+  z-index: 999;
+
 }
 
 .invert-color {

index.html

@@ -74,6 +74,32 @@
     z-index: 9999;
   }
 
+  .navbar{
+    position: fixed;
+    top: 0%;
+    left: 0%;
+    width: 100%;
+    z-index: 100;
+  } 
+  .dark-theme .navbar{
+    position: fixed;
+    top: 0%;
+    left: 0%;
+    width: 100%;
+    z-index: 100;
+  }
+  .navbar-container{
+    backdrop-filter: blur(10px);
+  }
+
+  .dark-theme a{
+    color: black;
+  }
+
+  .main-content{
+    padding-top: 4rem;
+  }
+
 
   @media (max-width: 740px) {
     .circle-container{
@@ -317,12 +343,14 @@
   <div class="progress-bar"></div>
 </div>
 
-<div class="main">
-
-  <div class="hamburger" onclick="toggleMenu()">
-    <i class="fas fa-bars"></i>
+<div class="main navbar" id="navbar">
+  <div class="hamburger" onclick="toggleNavbar()">
+    <div class="line"></div>
+    <div class="line"></div>
+    <div class="line"></div>
   </div>
-  <div class="container" id="nav-menu">
+  <div  class="container navbar-container">
+
     <div class="radio-wrapper">
       <div class="btn">
         <a id="aid" class="nav-link" href="">
@@ -375,6 +403,14 @@
 </div>
 
     </div>
+    <script>
+      function toggleNavbar() {
+        const navbar = document.getElementById('navbar');
+        navbar.classList.toggle('open');
+        const hamburger = document.querySelector('.hamburger');
+        hamburger.classList.toggle('open');
+      }
+    </script>
     <main>
 
       <div class="main-content">
@@ -383,8 +419,8 @@
           <div class="heading">
           <span>🚀&nbsp;</span><span>M</span><span>E</span><span>T</span><span>A</span><span>V</span><span>E</span><span>R</span><span>S</span><span>E</span>
         </div>
-          <label class="theme-toggle" for="themeToggle" style="z-index: 100; margin-top: -270px; ">
-
+          <label class="theme-toggle" for="themeToggle" >
+          
             <input type="checkbox" id="themeToggle" onclick="toggleTheme()" checked aria-label="Switch theme mode">
             <span class="slider"></span>
           </label>

style.css

@@ -1,11 +1,16 @@
 /* Common Styles */
 .container {
   display: flex;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   gap: 20px;
   margin-top: 20px;
+  z-index: 100;
 }
 
 .radio-wrapper {
@@ -69,6 +74,7 @@
 }
 
 .hamburger {
+  color: white;
   display: none;
   flex-direction: column;
   cursor: pointer;
@@ -78,10 +84,17 @@
   z-index: 1001;
 }
 
+.main.navbar.dark-theme {
+  background: #1a1a1a; /* Dark background */
+  color: #f0f0f0; /* Light text color */
+}
+
+
+
 .hamburger .line {
   width: 30px;
   height: 3px;
-  background: #23abd4;
+  background: white;
   margin: 5px 0;
   transition: all 0.3s ease-in-out;
 }
@@ -90,15 +103,18 @@
   /* .container {
     flex-direction: column;
     display: none;
-  } */
+  }
+
+  .navbar.open .container {
+    display: flex; /* Show the navbar when the menu is open */
+  }
+
 
   /* .hamburger {
     display: flex;
-  } */
-/* 
-  .container.open {
-    display: flex;
-  } */
+  }
+
+
 
   .hamburger.open .line:nth-child(1) {
     transform: rotate(45deg) translate(5px, 5px);