Merge pull request #825 from Nimit1775/main

fixed issue #818

index.html

@@ -291,67 +291,60 @@ <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
 
 <!-- JS to handle hamburger and close button -->
 <script>
+
   document.addEventListener("DOMContentLoaded", function () {
     const hamburger = document.getElementById("hamburger");
     const navList = document.getElementById("nav-list");
     const closeBtn = document.getElementById("closeBtn");
+    const mainHead = document.querySelector('.main-head'); // Selecting the header
 
+    // Hamburger menu functionality
     hamburger.addEventListener("click", function () {
       navList.classList.toggle("active");
     });
 
     closeBtn.addEventListener("click", function () {
       navList.classList.remove("active");
     });
-  });
 
-  document.addEventListener('DOMContentLoaded', function() {
-            console.log('DOM fully loaded and parsed'); // Simple test log
-            const modeToggle = document.getElementById('modeToggle');
-            const sunIcon = document.querySelector('.sun-icon');
-            const moonIcon = document.querySelector('.moon-icon');
-
-            // Additional code...
-            modeToggle.addEventListener('click', function() {
-    console.log('Toggle clicked'); // Log when the button is clicked
-    document.body.classList.toggle('dark-mode');
-    document.body.classList.toggle('light-mode');
-    const darkelem = document.querySelectorAll('#darkbtn');
-    const h1dark = document.querySelectorAll('#h1darkbtn');
-    const cardbtn = document.querySelectorAll('#btn a');
+    // Scroll event to handle header transparency
+    window.addEventListener("scroll", function () {
+      if (window.scrollY > 50) { // If scrolled more than 50px
+        mainHead.classList.add("shadow");
+      } else {
+        mainHead.classList.remove("shadow");
+      }
+    });
+
+    // Dark and light mode toggle logic
+    const modeToggle = document.getElementById('modeToggle');
+    const sunIcon = document.querySelector('.sun-icon');
+    const moonIcon = document.querySelector('.moon-icon');
 
-    if (document.body.classList.contains('dark-mode')) {
-        console.log('Switching to dark mode');
-        sunIcon.style.display = 'none';  // Hide sun icon
-        moonIcon.style.display = 'inline-block'; // Show moon icon
+    modeToggle.addEventListener('click', function() {
+      document.body.classList.toggle('dark-mode');
+      document.body.classList.toggle('light-mode');
+      const darkelem = document.querySelectorAll('#darkbtn');
+      const h1dark = document.querySelectorAll('#h1darkbtn');
+      const cardbtn = document.querySelectorAll('#btn a');
+
+      if (document.body.classList.contains('dark-mode')) {
+        sunIcon.style.display = 'none';
+        moonIcon.style.display = 'inline-block';
         localStorage.setItem('theme', 'dark');
-        darkelem.forEach((elem) =>{
-          elem.style.color = 'white';
-        })
-        cardbtn.forEach((elem) =>{
-          elem.style.color = 'white';
-        })
-        h1dark.forEach((darkbtn) =>{
-          darkbtn.style.color='#FFA500'
-        })
+        darkelem.forEach((elem) => elem.style.color = 'white');
+        cardbtn.forEach((elem) => elem.style.color = 'white');
+        h1dark.forEach((darkbtn) => darkbtn.style.color = '#FFA500');
       } else {
-        console.log('Switching to light mode');
-        sunIcon.style.display = 'inline-block';  // Show sun icon
-        moonIcon.style.display = 'none';   // Hide moon icon
+        sunIcon.style.display = 'inline-block';
+        moonIcon.style.display = 'none';
         localStorage.setItem('theme', 'light');
-        darkelem.forEach((elem) =>{
-          elem.style.color = 'gray';
-        }) 
-        h1dark.forEach((darkbtn) =>{
-          darkbtn.style.color='#0057B3'
-        })
-        cardbtn.forEach((elem) =>{
-          elem.style.color = 'black';
-        })
-    }
-});
-});
-
+        darkelem.forEach((elem) => elem.style.color = 'gray');
+        h1dark.forEach((darkbtn) => darkbtn.style.color = '#0057B3');
+        cardbtn.forEach((elem) => elem.style.color = 'black');
+      }
+    });
+  });
 </script>
 
 

style.css

@@ -272,43 +272,41 @@ a{
   z-index: 5;
   padding: 15px;
   height: 90px;
-  background-color: rgba(0, 0, 0, 0.7);
-  /*background-color: transparent;*/
+  background-color: #000; /* Initially black */
   color: white;
   display: flex;
-  justify-content: flex-start; /* Keep header centered */
+  justify-content: space-between; /* Adjusted to space-between for better layout */
   align-items: center;
-  transition: background-color 0.3s ease;
+  transition: background-color 0.3s ease, height 0.3s ease;
 }
+
 .main-head.shadow {
-  background-color: #000;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  background-color: rgba(0, 0, 0, 0.7); /* Becomes transparent when scrolled */
 }
+
 nav {
   display: flex;
   align-items: center;
   justify-content: center;
   max-width: 1200px; /* Limit the width for better centering */
   width: 100%; /* Ensure nav takes full width */
-  margin: 0 0; /* Center the nav */
+  margin: 0 auto; /* Center the nav */
 }
 
 .logo {
   display: flex;
   margin-left: 34px;
-
 }
 
 #nav-list {
   display: flex;
-  gap: 1;
+  gap: 1rem; /* Adjusted gap for better spacing */
   list-style: none;
   margin-left: 3px;
   padding: 0;
   align-items: center;
 }
 
-
 #nav-list li a {
   color: white;
   text-decoration: none;
@@ -331,20 +329,25 @@ nav {
   top: 20px;
   right: 20px;
   border: none;
-  background-color:white;
+  background-color: white;
   cursor: pointer;
   padding: 5px;
-
+  z-index: 10; /* Ensure it stays above other elements */
 }
+
 .mode-toggle img {
   width: 30px; /* Adjust the size as needed */
   height: auto;
-
 }
 
-
 /* Responsive Styles for smaller screens */
 @media (max-width: 768px) {
+  .main-head {
+    flex-direction: column;
+    height: auto;
+    padding: 10px;
+  }
+
   .hamburger {
     display: block; /* Show hamburger on small screens */
   }
@@ -366,7 +369,7 @@ nav {
   }
 
   /* Close button styles */
-  .dropdown-close-btn  {
+  .dropdown-close-btn {
     display: block; /* Visible only in the dropdown menu */
     align-self: flex-end;
     margin-right: 20px;
@@ -379,15 +382,11 @@ nav {
 
 /* Hide the close button on larger screens (revised) */
 @media (min-width: 769px) {
-  /* Hide the close button by setting its display to none and removing it from the DOM */
   .dropdown-close-btn {
     display: none;
-    /* Remove the close button from the DOM */
-    display: none !important;
   }
 }
 
-
 .hero {
   min-height: 100vh;
   background: linear-gradient(rgba(0, 0, 0, 0.8), transparent),