Add header fix

Author: Muchael123

src/components/HeroHeader/DesktopHero.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import Navbar from '../Navbar';
 import LinkButton from '../LinkButton/LinkButton';
 
 export default function HeroHeader() {
@@ -12,9 +11,7 @@ export default function HeroHeader() {
 
       }}
     >
-      <div className="relative">
-        <Navbar />
-      </div>
+      
       <div className="w-full flex flex-col items-center justify-center z-10 bg-black bg-opacity-30">
         <h1 className="font-montserrat font-bold text-center text-white text-[40px] leading-10 w-[388px] mx-auto mt-24">
           React Developer Community Kenya

src/components/HeroHeader/HeroHeader.tsx

@@ -20,7 +20,7 @@ export default function HeroHeader() {
   if (!screenWidth) return null;
 
   return (
-    <div id="hero" className="pt-2 bg-[#060b17]">
+    <div id="hero" className="pt-2  bg-[#060b17]">
       {screenWidth < breakpoint ? <MobileHero /> : <DesktopHero />}
     </div>
   );

src/components/Navbar/Navbar.tsx

@@ -8,7 +8,7 @@ import LinkButton from '../LinkButton/LinkButton';
 export default function Navbar() {
   return (
     <>
-      <header className="lg:pl-[49px] w-full fixed top-0 bg-black bg-opacity-50 z-10">
+      <header className="lg:pl-[49px]  w-full bg-black bg-opacity-50 z-10">
         <nav className="nav py-4 pl-5 flex flex-col md:flex-row justify-around items-center">
           <div>
             <Link href={HOME}>

src/pages/index.page.tsx

@@ -4,6 +4,7 @@ import ContactUs from '../components/ContactUs';
 import Events from '../components/Events/Events';
 import MissionPillars from '../components/MissionPillars/MissionPillars';
 import HeroHeader from '../components/HeroHeader';
+import Navbar from '../components/Navbar';
 
 export default function Home() {
   return (
@@ -22,6 +23,9 @@ export default function Home() {
         />
       </Head>
       <main className="">
+      <div className="fixed w-[100%] top-0 z-50">
+        <Navbar />
+      </div>
         <HeroHeader />
         <div className="flex flex-col py-12 bg-[#030e30] text-white">
           <AboutUs />