diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index bfd51ffd443651..8a74811f998114 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -431,6 +431,16 @@ button.wp-block-navigation-item__content {
  * Mobile menu.
  */
 
+@keyframes overlay-menu__fade-in-animation {
+	from {
+		opacity: 0;
+		top: 0.5em;
+	}
+	to {
+		opacity: 1;
+		top: 0;
+	}
+}
 .wp-block-navigation__responsive-container {
 	display: none;
 	position: fixed;
@@ -468,6 +478,11 @@ button.wp-block-navigation-item__content {
 		flex-direction: column;
 		background-color: inherit;
 
+		// Animation.
+		animation: overlay-menu__fade-in-animation 0.1s ease-out;
+		animation-fill-mode: forwards;
+		@include reduce-motion("animation");
+
 		// Try to inherit any root paddings set, so the X can align to a top-right aligned menu.
 		padding-top: var(--wp--style--root--padding-top, 2rem);
 		padding-right: var(--wp--style--root--padding-right, 2rem);
@@ -675,7 +690,8 @@ button.wp-block-navigation-item__content {
 }
 
 // Adjust open dialog top margin when admin-bar is visible.
-.has-modal-open .admin-bar .wp-block-navigation__responsive-dialog {
+// Needs to be scoped to .is-menu-open, or it will shift the position of any other navigations that may be present.
+.has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog {
 	margin-top: $admin-bar-height-big;
 
 	// Handle smaller admin-bar.