Use CSS @supports rule to change property values if popover is supported

src/_includes/global/navbar.njk

@@ -52,7 +52,13 @@
 
     .navbar__menu a:hover { color: var(--clr-link-hover); }
     .navbar__menu a:focus { outline-offset: 0.2em; }
-    .navbar__links { display: none; }
+
+    .navbar__links {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+        gap: 0.5em;
+    }
 
     .navbar__toggle {
         background-color: inherit;
@@ -61,7 +67,7 @@
         padding: 0;
         font-size: 1.25rem;
         font-weight: 700;
-        display: flex;
+        display: none;
         align-items: center;
         gap: 0.3em;
     }
@@ -85,16 +91,15 @@
         opacity: 0.5;
     }
 
+    @supports selector([popover]) {
+        .navbar__toggle { display: flex; }
+        .navbar__links { display: none; }
+    }
+
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .navbar { padding: 1em 0.6em; }
         .navbar__toggle, .navbar__popover { display: none; }
-
-        .navbar__links {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-evenly;
-            gap: 0.5em;
-        }
+        .navbar__links { display: flex; }
     }
 {% endcss %}