diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
index f60c6c619d..fed88c5c68 100644
--- a/src/app/navbar/navbar.component.scss
+++ b/src/app/navbar/navbar.component.scss
@@ -6,13 +6,14 @@ nav.navbar {
 /** Mobile menu styling **/
 @media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
     .navbar {
-        width: 100vw;
+        width: 100%;
         background-color: var(--bs-white);
         position: absolute;
         overflow: hidden;
         height: 0;
         &.open {
-            height: 100vh; //doesn't matter because wrapper is sticky
+          height: auto;
+          min-height: 100vh; //doesn't matter because wrapper is sticky
         }
     }
 }
diff --git a/src/app/shared/animations/slide.ts b/src/app/shared/animations/slide.ts
index b396333fb4..310ddbbfde 100644
--- a/src/app/shared/animations/slide.ts
+++ b/src/app/shared/animations/slide.ts
@@ -12,7 +12,7 @@ export const slide = trigger('slide', [
 
 export const slideMobileNav = trigger('slideMobileNav', [
 
-  state('expanded', style({ height: '100vh' })),
+  state('expanded', style({ height: 'auto', 'min-height': '100vh' })),
 
   state('collapsed', style({ height: 0 })),