fix: Resolve the visiblity issue in Nav-Bar

dist/index.html

@@ -8,6 +8,10 @@
     <link rel="stylesheet" href="style.css" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
+    />
     <link
       href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap"
       rel="stylesheet"
@@ -18,8 +22,9 @@
     <section
       class="bg-gradient-to-r from-gray-700 via-gray-900 to-black text-white font-grotesk overflow-hidden"
     >
-      <header class="bg-transparent backdrop-blur-sm  w-screen fixed">
+ <header class="bg-transparent backdrop-blur-sm  w-screen fixed z-50">
         <div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 ">
+
           <div class="flex h-24 items-center justify-between">
             <div class="flex-1 md:flex md:items-center md:gap-12">
               <a class="block text-teal-600" href="index.html">
@@ -41,27 +46,27 @@
             <div class="md:flex md:items-center md:gap-12">
               <nav aria-label="Global" class="hidden md:block">
                 <ul class="flex items-center gap-8 text-lg">
-                  <li>
+                  <li class="p-1 scroll-li">
                     <a
-                      class="text-gray-500 transition hover:text-gray-500/75"
+                      class="text-gray-500 transition hover:text-gray-500/75 custom-color"
                       href="about.html"
                     >
                       About
                     </a>
                   </li>
 
-                  <li>
+                  <li class="p-1 scroll-li">
                     <a
-                      class="text-gray-500 transition hover:text-gray-500/75"
+                      class="text-gray-500 transition hover:text-gray-500/75 custom-color"
                       href="services.html"
                     >
                       Services
                     </a>
                   </li>
 
-                  <li>
+                  <li class="p-1 scroll-li">
                     <a
-                      class="text-gray-500 transition hover:text-gray-500/75"
+                      class="text-gray-500 transition hover:text-gray-500/75 custom-color"
                       href="blog.html"
                     >
                       Blog
@@ -433,9 +438,11 @@
 
         <div class="mt-16 border-t border-gray-100 pt-8">
           <p class="text-center text-xs/relaxed text-gray-500">
+
             © Company <script>document.write(new Date().getFullYear())</script>. All rights reserved. <br>
             background graphic credits- <a href="https://pixabay.com/users/enchantedstudios-722609/" class="text-gray-700 transition hover:text-gray-700/75">EnchantedStudios</a>
 
+
             <br />
 
             Created with
@@ -451,6 +458,7 @@
       </div>
     </footer>
   </body>
+  <script src="scriptForScrool.js"></script>
   <script type="module">
     // Import the functions you need from the SDKs you need
     import { initializeApp } from "https://www.gstatic.com/firebasejs/10.6.0/firebase-app.js";

dist/scriptForScrool.js

@@ -0,0 +1,33 @@
+var liElements = document.querySelectorAll('.scroll-li');
+  var initialOffsetTop = liElements[0].offsetTop;
+
+  window.addEventListener('scroll', function () {
+    // Check if the scroll position is greater than the initial position
+    if (window.scrollY > initialOffsetTop) {
+      // Apply Tailwind CSS classes for scrolled state
+      liElements.forEach(function (li) {
+        li.classList.add();
+        li.classList.remove('border-transparent');
+
+        // Change color of specific <a> element within the <li>
+        var aElement = li.querySelector('.custom-color');
+        if (aElement) {
+          aElement.classList.add('text-white' , 'font-extrabold'); // Change to the desired color class
+          aElement.classList.remove('text-gray-500');
+        }
+      });
+    } else {
+      // Apply Tailwind CSS classes for normal state
+      liElements.forEach(function (li) {
+        li.classList.remove();
+        li.classList.add('border-transparent');
+
+        // Change color of specific <a> element within the <li>
+        var aElement = li.querySelector('.custom-color');
+        if (aElement) {
+          aElement.classList.remove('text-white' , 'font-extrabold');
+          aElement.classList.add('text-gray-500');
+        }
+      });
+    }
+  });