Sticky Navbar

yakubhariana70 · Nov 19, 2023 · 55991ea · 55991ea
1 parent 8d536b3
commit 55991ea
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/src/components/NavigationBar.jsx b/src/components/NavigationBar.jsx
@@ -4,7 +4,7 @@ import logo from "/jakarta-tourism.svg";
 
 const NavigationBar = () => {
   return (
-    <div>
+    <div className="navigation-bar">
       <Navbar sticky="top" expand="lg">
         <Container fluid className="px-5">
           <Navbar.Brand href="/jakspace-webgis/">

diff --git a/src/pages/Home/Home.css b/src/pages/Home/Home.css
@@ -4,7 +4,7 @@
 }
 
 header {
-  position: absolute;
+  position: fixed;
   width: 100%;
   flex: 2 2 10vh;
   margin-top: 1.5rem;
@@ -13,14 +13,15 @@ header {
   align-items: center;
 }
 
-.home-nav {
+div.home-nav {
   width: 95vw;
   /* border: 1px solid limegreen; */
   border-radius: 3rem;
   background-color: white;
   box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
 }
 
+
 .home-picture {
   /* height: 40vh; */
   flex: 1 1 50vh;