Unbork mobile nav

components/Navigation.tsx

@@ -68,20 +68,13 @@ export default function (props: {
 
   return (
     <>
-      <style media="(min-width: 1281px)">
+      <style media="all and (min-width: 1281px)">
         {`
           #nav-menu {
             display: none
           }
         `}
       </style>
-      <style media="(max-width: 1280px)">
-        {`
-          #nav-links {
-            display: none
-          }
-        `}
-      </style>
       <Box as="section" pb={{ base: "6" }}>
         <Box as="nav" boxSizing="unset">
           <Container display="grid" maxW="container.xl" py={{ base: "6" }}>
@@ -104,8 +97,12 @@ export default function (props: {
               </a>
               <Spacer />
               <Spacer />
-              <Flex alignItems="center" className="nav-links">
+              <HStack
-                <HStack gap="3rem" whiteSpace="nowrap">
+                alignItems="center"
+                gap="3rem"
+                whiteSpace="nowrap"
+                className="nav-links"
+              >
                 <Link href="/about" size="lg">
                   About Us
                 </Link>
@@ -123,7 +120,6 @@ export default function (props: {
                   Moderation
                 </Link>
               </HStack>
-              </Flex>
               <Spacer />
               <Spacer />
               <div className="nav-links">

index.css

@@ -84,6 +84,6 @@ button:focus-visible {
 
 @media (max-width: 1280px) {
   .nav-links {
-    display: none;
+    display: none !important;
   }
 }