diff --git a/src/app-layout/__tests__/skeleton.test.tsx b/src/app-layout/__tests__/skeleton.test.tsx
index a3bb1eb7d9c..2d14c3cdba9 100644
--- a/src/app-layout/__tests__/skeleton.test.tsx
+++ b/src/app-layout/__tests__/skeleton.test.tsx
@@ -5,6 +5,7 @@ import { render } from '@testing-library/react';
 
 import AppLayout from '../../../lib/components/app-layout';
 import { BeforeMainSlotSkeleton } from '../../../lib/components/app-layout/visual-refresh-toolbar/skeleton/skeleton-parts';
+import AppLayoutToolbar from '../../../lib/components/app-layout-toolbar';
 import BreadcrumbGroup from '../../../lib/components/breadcrumb-group';
 import { getFunnelKeySelector } from '../../../lib/components/internal/analytics/selectors';
 import { describeEachAppLayout, renderComponent } from './utils';
@@ -95,6 +96,46 @@ describeEachAppLayout({ themes: ['refresh-toolbar'] }, () => {
       expect(wrapper.findByClassName(skeletonStyles['panel-hidden'])).toBeFalsy();
     });
 
+    it('reserves space for the open navigation when the navigation trigger is hidden', () => {
+      const noop = () => {};
+      const { wrapper, rerender } = renderComponent(
+        <AppLayoutToolbar
+          navigation="test nav"
+          navigationTriggerHide={true}
+          navigationOpen={true}
+          onNavigationChange={noop}
+          breadcrumbs="dummy"
+        />
+      );
+      expect(wrapper.findNavigationToggle()).toBeFalsy();
+      expect(wrapper.findByClassName(skeletonStyles.navigation)).toBeTruthy();
+      expect(wrapper.findByClassName(skeletonStyles['panel-hidden'])).toBeFalsy();
+      rerender(
+        <AppLayoutToolbar
+          navigation="test nav"
+          navigationTriggerHide={true}
+          navigationOpen={false}
+          onNavigationChange={noop}
+          breadcrumbs="dummy"
+        />
+      );
+      expect(wrapper.findByClassName(skeletonStyles['panel-hidden'])).toBeTruthy();
+    });
+
+    it('reserves space for the open navigation in a secondary layout', () => {
+      const { wrapper } = renderComponent(
+        <AppLayout
+          {...{ __forceDeduplicationType: 'secondary' }}
+          navigation="test nav"
+          navigationOpen={true}
+          onNavigationChange={() => {}}
+        />
+      );
+      expect(wrapper.findByClassName(skeletonStyles['toolbar-container'])).toBeFalsy();
+      expect(wrapper.findByClassName(skeletonStyles.navigation)).toBeTruthy();
+      expect(wrapper.findByClassName(skeletonStyles['panel-hidden'])).toBeFalsy();
+    });
+
     it('toolbar can render conditionally', () => {
       const { wrapper, rerender } = renderComponent(<AppLayout navigationHide={true} toolsHide={true} />);
       // cannot use wrapper.findToolbar() because our public test utils resolve to nothing in skeleton state
diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/skeleton-parts.tsx b/src/app-layout/visual-refresh-toolbar/skeleton/skeleton-parts.tsx
index 5c8e6a8fe15..d36359df845 100644
--- a/src/app-layout/visual-refresh-toolbar/skeleton/skeleton-parts.tsx
+++ b/src/app-layout/visual-refresh-toolbar/skeleton/skeleton-parts.tsx
@@ -19,14 +19,16 @@ import styles from './styles.css.js';
 
 export const BeforeMainSlotSkeleton = React.forwardRef<HTMLElement, SkeletonPartProps>(
   ({ toolbarProps, appLayoutProps }, ref) => {
-    const hasNavigation = toolbarProps ? toolbarProps.hasNavigation : !!appLayoutProps.navigation;
+    const hasNavigation =
+      !!toolbarProps?.hasNavigation || (!!appLayoutProps.navigation && !appLayoutProps.navigationHide);
+    const navigationOpen = !!(toolbarProps?.navigationOpen ?? appLayoutProps.navigationOpen);
     return (
       <>
         {!!toolbarProps && (
           <ToolbarSkeletonStructure
             ref={ref}
             ariaLabels={toolbarProps.ariaLabels}
-            hasNavigation={hasNavigation}
+            hasNavigation={toolbarProps.hasNavigation}
             navigationOpen={toolbarProps.navigationOpen}
             ownBreadcrumbs={appLayoutProps.breadcrumbs}
           />
@@ -35,18 +37,16 @@ export const BeforeMainSlotSkeleton = React.forwardRef<HTMLElement, SkeletonPart
           <div
             className={clsx(
               styles.navigation,
-              !toolbarProps?.navigationOpen && !toolbarProps?.navigationCollapsible && styles['panel-hidden'],
-              !toolbarProps?.navigationOpen && toolbarProps?.navigationCollapsible && styles['navigation-collapsed'],
+              !navigationOpen && !toolbarProps?.navigationCollapsible && styles['panel-hidden'],
+              !navigationOpen && toolbarProps?.navigationCollapsible && styles['navigation-collapsed'],
               !!toolbarProps?.activeDrawerId && styles['unfocusable-mobile']
             )}
           >
             <div
               className={clsx(
                 navStyles['navigation-container'],
-                toolbarProps?.navigationOpen && navStyles['is-navigation-open'],
-                !toolbarProps?.navigationOpen &&
-                  toolbarProps?.navigationCollapsible &&
-                  navStyles['is-navigation-collapsed']
+                navigationOpen && navStyles['is-navigation-open'],
+                !navigationOpen && toolbarProps?.navigationCollapsible && navStyles['is-navigation-collapsed']
               )}
             >
               <nav className={navStyles.navigation}>