Fix Navbar dark mode and watch now button zindex issue

Signed-off-by: Chetan8299 <csingh8299@gmail.com>
abhay-raj19 · May 30, 2024 · 59347c4 · 59347c4
1 parent bd44dfa
commit 59347c4
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 8 deletions.
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -52,9 +52,9 @@ const Header = ({ isDarkMode, setDarkMode }) => {
 			document.documentElement.scrollTop > 80
 		) {
 			setHeaderBackground(isDarkMode ? "#111" : "#fff");
-			headerRef.current.classList.add("sticky_header");
+			headerRef.current.classList.add("fixed_header");
 		} else {
-			headerRef.current.classList.remove("sticky_header");
+			headerRef.current.classList.remove("fixed_header");
 		}
 	};
 
@@ -84,7 +84,7 @@ const Header = ({ isDarkMode, setDarkMode }) => {
 		toggleMobileMenu();
 	};
 
-	const headerClass = isDarkMode ? "header dark-mode" : "header";
+	const headerClass = isDarkMode ? "header dark-mode sticky_header" : "header sticky_header";
 
 	return (
 		<header
@@ -141,7 +141,7 @@ const Header = ({ isDarkMode, setDarkMode }) => {
 
 					{/*====Navigation bar====*/}
 
-					<div className="nav__links">
+					<div className={`${isDarkMode ? "nav__links dark_nav__links" : "nav__links"}`}>
 						<div className="navigation">
 							<ul className="menu">
 								{nav__links.map((item, index) => (

diff --git a/src/styles/header.css b/src/styles/header.css
@@ -163,8 +163,16 @@ ul {
     left: 0;
     z-index: 99;
     background: #fff;
-
-}
+  }
+
+  .fixed_header {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      z-index: 99;
+      background: #fff;
+  }
 
 .logo h2 a {
     text-decoration: none;
@@ -218,28 +226,50 @@ ul {
         flex-direction: column;
         width: 100%;
         color: #000000;
-        background-color: #ffff;
         transition: all 0.3s ease-in-out;
-        overflow-y: auto; 
+        overflow-y: auto;
         gap: 1rem;
         z-index: 99;
+        background: rgba(238, 227, 227, 0.966);
+        background-color: #f4f4f9f8;
+        backdrop-filter: blur(60px);
+        box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
+        border: 2px solid rgba(28, 26, 26, 0.327);
+        border-top: 0px;
     }
+
+    .dark_nav__links {
+        background-color: #1e1e1e;
+        color: #fff;
+        background: rgba(39, 39, 39, 0.966);
+        backdrop-filter: blur(60px);
+        box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
+        border: 2px solid rgba(255, 255, 255, 0.532);
+        border-top: 0px;
+        position: absolute;
+        top: 6.2rem;
+      }
 
     .menu {
         flex-direction: column;
     }
 
     #nav-check:not(:checked)~.nav__links {
         height: 0px;
+        border: 0px solid black;
+        width: 94vw;
     }
 
     #nav-check:checked~.nav__links {
         transition: all 0.75s ease-in-out;
+        padding-bottom: 2rem;
         height: 85vh;
         overflow-y: auto;
         border-bottom-left-radius: 30px;
         border-bottom-right-radius: 30px;
         box-shadow: 0px 0px 1px 0px #000000a1;
+        width: 94vw;
+        z-index: 500;
     }
 
     .nav_item {