Update style.css

static/style.css

@@ -161,9 +161,16 @@ footer a:hover { color: white; text-decoration: underline; }
     left: -5vw;
     overflow: hidden;  /* Make sure the blur doesn't leak outside the button */
     z-index: 1;  /* Ensure the button is above the blurred background */
+    transition: background-color 200ms linear;
 }
 
-.navbar-toggler::before {
+.navbar-toggler.scrolled {
+    background-color: rgb(50, 50, 50, 0.7);  /* Change to whatever color you want after scrolling */
+    transition: background-color 200ms linear;
+
+}
+
+/* .navbar-toggler::before {
     content: "";
     position: absolute;
     top: 0;
@@ -173,7 +180,7 @@ footer a:hover { color: white; text-decoration: underline; }
     background-color: rgba(176, 178, 185, 0.5);  /* Semi-transparent gray color */
     backdrop-filter: blur(10px);  /* Blur the background behind the button */
     z-index: -1;  /* Position the blurred background behind the button */
-}
+} */
 
 .navbar-toggler-icon {
     z-index: 100;