From 57cc7ce021b840f2e625054b0dafd14bf0e52af0 Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Sat, 18 May 2024 23:30:29 +0200
Subject: [PATCH] fixed glass effect on navbar not showing up on mobile

---
 app/globals.css       | 5 +++++
 components/Navbar.tsx | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/globals.css b/app/globals.css
index a8c214d..7641b9d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -62,4 +62,9 @@
 
 ::-webkit-scrollbar {
   display: none;
+}
+
+.glass {
+  backdrop-filter: blur(15px) saturate(100%);
+  -webkit-backdrop-filter: blur(15px) saturate(100%);
 }
\ No newline at end of file
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 8023f11..4399fa1 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -93,7 +93,7 @@ function Navbar() {
     <>
       <div
         className={`fixed left-0 top-0 z-50 flex w-screen justify-center px-7 xl:px-0 ${
-          isScrolled ? "border-b backdrop-blur-lg" : ""
+          isScrolled ? "glass border-b bg-background/50" : ""
         }`}
       >
         <div className="flex h-20 w-full max-w-7xl flex-row-reverse items-center justify-between sm:flex-row">