Merge pull request #707 from near/feat/viewport-centered-nav

Centering nav to viewport for larger screens
near · Oct 13, 2023 · fa1eb5d · fa1eb5d
2 parents 680e74d + d39584b
commit fa1eb5d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/src/components/navigation/desktop/DesktopNavigation.tsx b/src/components/navigation/desktop/DesktopNavigation.tsx
@@ -37,7 +37,6 @@ const Wrapper = styled.div<{
 const Container = styled.div`
   display: flex;
   align-items: center;
-  justify-content: center;
   height: 100%;
   margin: 0 auto;
 `;
@@ -46,7 +45,6 @@ const Logo = styled.a`
   text-decoration: none;
   cursor: pointer;
   outline: none;
-  margin-right: auto;
   transition: all 200ms;
   border-radius: 4px;
 

diff --git a/src/components/navigation/desktop/MainNavigationMenu.tsx b/src/components/navigation/desktop/MainNavigationMenu.tsx
@@ -11,11 +11,19 @@ import { navigationCategories } from '../navigation-categories';
 const Wrapper = styled.div`
   position: relative;
   display: flex;
-  justify-content: center;
   z-index: 1;
   flex-grow: 1;
   padding: 0 1rem;
   height: var(--nav-height);
+
+  @media (min-width: 1145px) {
+    // This center aligns the nav items in the center of the viewport on larger screens
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    max-width: min-content;
+  }
 `;
 
 const NavRoot = styled(NavigationMenu.Root)`