diff --git a/.changeset/small-days-share.md b/.changeset/small-days-share.md
new file mode 100644
index 00000000000..79c6bb65472
--- /dev/null
+++ b/.changeset/small-days-share.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Improve visual styling of mobile menu toggle when menu is open
diff --git a/packages/starlight/components/MobileMenuToggle.astro b/packages/starlight/components/MobileMenuToggle.astro
index 56d36e4b757..d25f38651f7 100644
--- a/packages/starlight/components/MobileMenuToggle.astro
+++ b/packages/starlight/components/MobileMenuToggle.astro
@@ -10,7 +10,8 @@ import Icon from '../user-components/Icon.astro';
 		aria-controls="starlight__sidebar"
 		class="sl-flex md:sl-hidden"
 	>
-		<Icon name="bars" />
+		<Icon name="bars" class="open-menu" />
+		<Icon name="close" class="close-menu" />
 	</button>
 </starlight-menu-button>
 
@@ -67,19 +68,18 @@ import Icon from '../user-components/Icon.astro';
 		cursor: pointer;
 	}
 
-	[aria-expanded='true'] button {
-		background-color: var(--sl-color-gray-2);
-		box-shadow: none;
+	[aria-expanded='true'] button .open-menu {
+		display: none;
+	}
+
+	:not([aria-expanded='true']) button .close-menu {
+		display: none;
 	}
 
 	:global([data-theme='light']) button {
 		background-color: var(--sl-color-black);
 		color: var(--sl-color-white);
 	}
-
-	:global([data-theme='light']) [aria-expanded='true'] button {
-		background-color: var(--sl-color-gray-5);
-	}
 </style>
 
 <style is:global>