Unbork mobile nav

regalijan · Oct 19, 2023 · 8c24923 · 8c24923
1 parent 87b7d0f
commit 8c24923
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 29 deletions.
diff --git a/components/Navigation.tsx b/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,26 +97,29 @@ export default function (props: {
               </a>
               <Spacer />
               <Spacer />
-              <Flex alignItems="center" className="nav-links">
-                <HStack gap="3rem" whiteSpace="nowrap">
-                  <Link href="/about" size="lg">
-                    About Us
-                  </Link>
-                  <Link href="/team" size="lg">
-                    Our Team
-                  </Link>
-                  <Link href="/support" size="lg">
-                    Support
-                  </Link>
-                  <Link
-                    display={hasMod() ? undefined : "none"}
-                    href="/mod-queue"
-                    size="lg"
-                  >
-                    Moderation
-                  </Link>
-                </HStack>
-              </Flex>
+              <HStack
+                alignItems="center"
+                gap="3rem"
+                whiteSpace="nowrap"
+                className="nav-links"
+              >
+                <Link href="/about" size="lg">
+                  About Us
+                </Link>
+                <Link href="/team" size="lg">
+                  Our Team
+                </Link>
+                <Link href="/support" size="lg">
+                  Support
+                </Link>
+                <Link
+                  display={hasMod() ? undefined : "none"}
+                  href="/mod-queue"
+                  size="lg"
+                >
+                  Moderation
+                </Link>
+              </HStack>
               <Spacer />
               <Spacer />
               <div className="nav-links">

diff --git a/index.css b/index.css
@@ -84,6 +84,6 @@ button:focus-visible {
 
 @media (max-width: 1280px) {
   .nav-links {
-    display: none;
+    display: none !important;
   }
 }