Fix .slicknav_menu position to resolve navbar obscuring issue

- Changed .slicknav_menu from position: absolute to position: relative - Added z-index: 1000 for proper layering - This prevents the mobile menu from covering the main navbar
Reduce hero::before overlay opacity from 60% to 30% for better background visibility
2026-03-17 14:32:36 -05:00 · 2026-03-17 14:28:15 -05:00 · 2026-03-17 14:25:43 -05:00 · 2026-03-17 14:23:08 -05:00 · 2026-03-17 14:20:52 -05:00 · 2026-03-17 14:18:31 -05:00
1 changed files with 8 additions and 5 deletions
--- a/css/custom.css
+++ b/css/custom.css
@@ -669,7 +669,7 @@ header.main-header .header-sticky.active{
 	right: 0;
 	border-radius: 0;
    transform: translateY(0);
-	background: var(--primary-color);
+	background: transparent;
 	border-bottom: 1px solid var(--divider-color);
 	backdrop-filter: blur(30px);
 }
@@ -678,6 +678,7 @@ header.main-header .header-sticky.active{
 	padding: clamp(15px, 3vh, 25px) 0;
 	align-items: center;
 	transition: all 0.3s ease;
+	background: transparent;
 }

 .navbar.scrolled{
@@ -842,7 +843,8 @@ header.main-header .header-sticky.active{
 }

 .slicknav_menu{
-	position: absolute;
+    position: relative;
+    z-index: 1000;
    width: 100%;
 	padding: 0;
 	background: var(--accent-color);
@@ -916,7 +918,8 @@ header.main-header .header-sticky.active{
 	min-height: 100vh;
 	overflow: hidden;
 	padding: clamp(100px, 20vh, 200px) 0;
-	margin-top: -50px;
+	margin-top: 0;
+	z-index: 1;
 }

 .hero::before{
@@ -927,7 +930,7 @@ header.main-header .header-sticky.active{
 	bottom: 0;
 	left: 0;
 	background-color: var(--primary-color);
-	opacity: 60%;
+	opacity: 30%;
 	width: 100%;
 	height: 100%;
 	z-index: 0;
@@ -4706,7 +4709,7 @@ header.main-header .header-sticky.active{
 	}
 }

-@media only screen and (max-width: 991px){
+@media only screen and (max-width: 768px){

 	.slicknav_nav li,
 	.slicknav_nav ul{
Author	SHA1	Message	Date
Krishna Ayyalasomayajula	d12f39b151	Fix .slicknav_menu position to resolve navbar obscuring issue - Changed .slicknav_menu from position: absolute to position: relative - Added z-index: 1000 for proper layering - This prevents the mobile menu from covering the main navbar	2026-03-17 14:32:36 -05:00
Krishna Ayyalasomayajula	dae335b1ff	Reduce hero::before overlay opacity from 60% to 30% for better background visibility	2026-03-17 14:28:15 -05:00
Krishna Ayyalasomayajula	7ac7e472a5	Fix navbar sticky background to remain transparent When the page is scrolled and .header-sticky.active is applied, change background from var(--primary-color) to transparent so the hero background image remains visible.	2026-03-17 14:25:43 -05:00
Krishna Ayyalasomayajula	f0e275a24f	Fix navbar transparent background - Added 'background: transparent;' to .navbar selector - Restores transparent navbar background that may have been removed in Phase 4.2	2026-03-17 14:23:08 -05:00
Krishna Ayyalasomayajula	8d0face1ad	Fix slicknav responsive breakpoint from 991px to 768px	2026-03-17 14:20:52 -05:00
Krishna Ayyalasomayajula	2bec588f07	Restore slicknav_menu to working state - position: absolute, no z-index	2026-03-17 14:18:31 -05:00
Krishna Ayyalasomayajula	04c1db49bc	Restore slicknav_menu z-index to 1000 to fix navbar visibility	2026-03-17 14:17:09 -05:00
Krishna Ayyalasomayajula	8f445ace51	Fix slicknav_menu positioning and z-index to prevent header overlay	2026-03-17 14:13:05 -05:00
Krishna Ayyalasomayajula	b20e5ab276	Add explicit z-index to hero and slicknav for better stacking	2026-03-17 14:06:13 -05:00
Krishna Ayyalasomayajula	db28aa077a	Fix hero section negative margin overlapping navbar	2026-03-17 14:05:39 -05:00