sticky navbar

src/components/navbar/Navbar.css

@@ -1,15 +1,37 @@
 .codeutsava__navbar{
-    /* display: flex;
-    justify-content: space-between;
-    align-items: center; */
+    z-index: 9999;
+    width: 100%;
+    position: sticky;
+    top: 0px;
 }
 
 .codeutsava__navbar-body {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+    background-color: black;
+    backdrop-filter: blur(10px);
+    position: relative;
+    z-index: 1;
 }
+
+.content {
+    padding: 16px;
+  }
+
+  /* The sticky class is added to the navbar with JS when it reaches its scroll position */
+  .sticky {
+    position: fixed;
+    top: 0;
+    width: 100%;
+  }
+
+  /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
+  .sticky + .content {
+    padding-top: 60px;
+  }
+
 .codeutsava__navbar-logo {
     max-width: 90px;
 }

src/components/navbar/Navbar.js

@@ -1,45 +1,46 @@
-import React, { Component } from 'react'
+import React from 'react'
 import './Navbar.css';
 import codeutsava from "../../assets/images/codeutsava.png";
 import tcp from "../../assets/images/tcp.png";
-export default class Navbar extends Component {
-  render() {
-    return (
-      <div className='codeutsava__navbar'>
-        <div className='codeutsava__navbar-body'>
-            <div className='codeutsava__navbar-logo'>
-              <img src={codeutsava} className='codeutsava__navbar-logo'/>
-            </div>
-            <div className='codeutsava__navbar-menu'>
-            <a><div className='codeutsava__navbar-menu-heading'>
-                    Home
-                </div></a>
-            <a href='#aboutus'><div className='codeutsava__navbar-menu-heading'>
-                    About Us
-                </div></a>  
-            <a href='#events'><div className='codeutsava__navbar-menu-heading'>
-                    Events
-                </div></a>
-            <a href='#speakers'><div className='codeutsava__navbar-menu-heading'>
-                    Speakers
-                </div></a>
-            <a href='#sponsers'><div className='codeutsava__navbar-menu-heading'>
-                    Sponsors
-                </div></a>
-            <a href='#faq'><div className='codeutsava__navbar-menu-heading'>
-                FAQ
-                </div></a>
-                <div className='codeutsava__navbar-menu-heading'>
-                    Contact Us
-                </div>
 
-            </div>
-            <div className='codeutsava__navbar-logo'>
-              <img src={tcp} className='codeutsava__navbar-logo'/>
-            </div>
-        </div>
+const Navbar = () => {
+  return (
+    <div className={`codeutsava__navbar`}>
+      <div className={`codeutsava__navbar-body`}>
+          <div className='codeutsava__navbar-logo'>
+            <img src={codeutsava} className='codeutsava__navbar-logo'/>
+          </div>
+          <div className='codeutsava__navbar-menu'>
+          <a><div className='codeutsava__navbar-menu-heading'>
+                  Home
+              </div></a>
+          <a href='#aboutus'><div className='codeutsava__navbar-menu-heading'>
+                  About Us
+              </div></a>  
+          <a href='#events'><div className='codeutsava__navbar-menu-heading'>
+                  Events
+              </div></a>
+          <a href='#speakers'><div className='codeutsava__navbar-menu-heading'>
+                  Speakers
+              </div></a>
+          <a href='#sponsers'><div className='codeutsava__navbar-menu-heading'>
+                  Sponsors
+              </div></a>
+          <a href='#faq'><div className='codeutsava__navbar-menu-heading'>
+              FAQ
+              </div></a>
+              <div className='codeutsava__navbar-menu-heading'>
+                  Contact Us
+              </div>
 
+          </div>
+          <div className='codeutsava__navbar-logo'>
+            <img src={tcp} className='codeutsava__navbar-logo'/>
+          </div>
       </div>
-    )
-  }
+
+    </div>
+  )
 }
+
+export default Navbar