refactor header, fix the max width for the menu to avoid FOUC

datacommonsorg · Oct 30, 2024 · 6d72c60 · 6d72c60
1 parent 7836d72
commit 6d72c60
Showing 1 changed file with 4 additions and 8 deletions.
diff --git a/static/css/core.scss b/static/css/core.scss
@@ -85,17 +85,15 @@ section {
 
 #main-nav {
   position: relative;
-  display: flex;
-  align-items: stretch;
+  width: 100vw;
   height: fit-content;
 
   .navbar-menu-large {
     display: flex;
-    flex-grow: 1;
-    align-items: stretch;
     gap: calc(#{var.$spacing} * 4);
     padding: 0 calc(#{var.$spacing} * 3);
     margin: auto;
+    width: 100%;
     max-width: $header-max-width;
     justify-content: space-between;
     height: $header-desktop-height;
@@ -133,9 +131,7 @@ section {
 
     .header-menu {
       display: flex;
-      justify-content: right;
-      align-items: stretch;
-      transition: flex-basis 0.4s ease-in-out;
+      max-width: 450px;
       &-list {
         display: flex;
         align-items: stretch;
@@ -570,7 +566,7 @@ section {
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  flex-grow: 1;
+  flex-grow: 2;
   @include media-breakpoint-up(xl) {
     padding-right: 64px;
   }