Navbar Improved

css/style.css

@@ -14,14 +14,14 @@ http://www.templatemo.com/tm-490-comila
   box-sizing: border-box;
 }
 
-nav {
-  background-color: rgba(0, 0, 0, 0.2);
+/* nav {
+  background-color: rgba(0,0,0,0.2);
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 10px 20px;
-}
+} */
 
 .logo-container {
   display: inline-flex;
@@ -853,7 +853,7 @@ div.card {
 
 /* Navbar section */
 .navbar {
-  background: rgba(0, 0, 0, 0.7);
+  /* background: rgba(0, 0, 0, 0.7); */
   position: fixed;
   top: 0;
   left: 0;
@@ -862,18 +862,42 @@ div.card {
 }
 
 .navbar nav {
+  position:fixed;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 80px;
+  height: 90px;
+  top: 0;
+  left: 0;
+  width:100%;
+  padding: 20px 0px;
+  border:none;
+  transition: all 0.6s;
+}
+.navbar nav.sticky{
+  height:80px;
+  background: linear-gradient(rgb(183, 123, 27),rgba(249, 177, 43, 0.818));
+  color:white !important;
+  /* border-bottom: 1.5px solid rgb(0, 0, 0); */
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  box-shadow: 0 0 2px 2px rgb(78, 38, 17, 0.8);
+  padding: 10px 0px;
+}
+.navbar nav ul li i{
+  filter:invert(1);
+}
+.navbar nav.sticky ul li i{
+  filter:invert(0);
 }
-
 .navbar .logo {
   display: flex;
   align-items: center;
   color: white;
   font-size: 35px;
-  line-height: 80px;
+  line-height: 60px;
   padding: 0 20px;
   font-weight: bold;
 }
@@ -891,6 +915,26 @@ div.card {
   padding: 0;
 }
 
+.navbar ul li {
+  display: inline-block;
+  margin: 0 5px;
+}
+
+.navbar ul li a {
+  color: #fcfafa;
+  font-size: 15px;
+  padding: 10px 20px;
+  border-radius: 3px;
+  text-transform: uppercase;
+  text-decoration: none;
+}
+
+.navbar ul li a:hover {
+  color: #fcf6f6;
+  background: linear-gradient(to top left, #edfc4890 30%, #f4d01e 20%);
+  transform: scale(1.2) translateY(10px);
+}
+
 .navbar .checkbut {
   display: none;
 }

index.html

@@ -346,7 +346,6 @@
         document.documentElement.scrollTop = 0;
       }
     </script>
-    =======
 
     <!-- Navbar -->
     <div class="navbar">
@@ -359,12 +358,12 @@
         <span class="logo-text" style="margin-left: 0;">Open Source Village</span>
       </label>
       <ul class="flex flex-col md:flex-row">
-        <li><i class="fa-solid fa-house" style="filter:invert(1)"></i><a class="active" href="#home">Home</a></li>
-        <li><i class="fa-solid fa-circle-info" style="filter:invert(1)"></i><a href="#about">About</a></li>
-        <li><i class="fa-solid fa-list" style="filter:invert(1)"></i><a href="#services">Services</a></li>
-        <li><i class="fa-solid fa-user" style="filter:invert(1)"></i><a href="#testimonials">Reviews</a></li>
-        <li><i class="fa-solid fa-at" style="filter:invert(1)"></i><a href="#contact">Contact Us</a></li>
-        <li><i class="fa-solid fa-message" style="filter:invert(1)"></i><a href="#feedback">Feedback</a></li>
+        <li><i class="fa-solid fa-house" ></i><a class="active" href="#home">Home</a></li>
+        <li><i class="fa-solid fa-circle-info"></i><a href="#about">About</a></li>
+        <li><i class="fa-solid fa-list"></i><a href="#services">Services</a></li>
+        <li><i class="fa-solid fa-user" ></i><a href="#testimonials">Reviews</a></li>
+        <li><i class="fa-solid fa-at" ></i><a href="#contact">Contact Us</a></li>
+        <li><i class="fa-solid fa-message"></i><a href="#feed-back">Feedback</a></li>
       </ul>
     </nav>
   </div>
@@ -1201,5 +1200,12 @@ <h4 class="footer_title">Quick Links</h4>
         allowedOrigins: [],
       });
     </script>
+
+<script type="text/javascript">
+  window.addEventListener("scroll", function(){
+    var header= document.querySelector("nav");
+    header.classList.toggle("sticky", window.scrollY >10)
+  })
+</script>
   </body>
 </html>

index.js

@@ -23,6 +23,17 @@ function validateEmail() {
     }
 }
 
+//nav sticky
+window.addEventListener('scroll', function() {
+    var navbar = document.querySelector('nav');
+    if (window.scrollY > 0) {
+      navbar.classList.add('sticky');
+    } else {
+      navbar.classList.remove('sticky');
+    }
+  });
+
+
 // Middleware
 app.use(bodyParser.urlencoded({ extended: true }));