diff --git a/src/UIShell/GlobalHeader/Header.svelte b/src/UIShell/GlobalHeader/Header.svelte
index 47668a89..c106e746 100644
--- a/src/UIShell/GlobalHeader/Header.svelte
+++ b/src/UIShell/GlobalHeader/Header.svelte
@@ -35,6 +35,7 @@
   /** Obtain a reference to the HTML anchor element */
   export let ref = null;
 
+  import { shouldRenderHamburgerMenu } from "../navStore";
   import HamburgerMenu from "../SideNav/HamburgerMenu.svelte";
 
   let winWidth = undefined;
@@ -50,7 +51,7 @@
 
 <header role="banner" aria-label="{ariaLabel}" class:bx--header="{true}">
   <slot name="skip-to-content" />
-  {#if winWidth < 1056 || persistentHamburgerMenu}
+  {#if ($shouldRenderHamburgerMenu && winWidth < 1056) || persistentHamburgerMenu}
     <HamburgerMenu bind:isOpen="{isSideNavOpen}" />
   {/if}
   <a
diff --git a/src/UIShell/SideNav/SideNav.svelte b/src/UIShell/SideNav/SideNav.svelte
index 9e66982d..96189e31 100644
--- a/src/UIShell/SideNav/SideNav.svelte
+++ b/src/UIShell/SideNav/SideNav.svelte
@@ -10,6 +10,14 @@
 
   /** Set to `true` to toggle the expanded state */
   export let isOpen = false;
+
+  import { onMount } from "svelte";
+  import { shouldRenderHamburgerMenu } from "../navStore";
+
+  onMount(() => {
+    shouldRenderHamburgerMenu.set(true);
+    return () => shouldRenderHamburgerMenu.set(false);
+  });
 </script>
 
 {#if fixed}
diff --git a/src/UIShell/navStore.js b/src/UIShell/navStore.js
new file mode 100644
index 00000000..358127be
--- /dev/null
+++ b/src/UIShell/navStore.js
@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const shouldRenderHamburgerMenu = writable(false);