diff --git a/src/modules/navigation-bar/components/DefaultNavBar.tsx b/src/modules/navigation-bar/components/DefaultNavBar.tsx
index 3e34490f..da7ff7c7 100644
--- a/src/modules/navigation-bar/components/DefaultNavBar.tsx
+++ b/src/modules/navigation-bar/components/DefaultNavBar.tsx
@@ -43,19 +43,6 @@ export function DefaultNavBar() {
     } = useMetadataServerSettings();
 
     const appBarRef = useRef<HTMLDivElement | null>(null);
-    useResizeObserver(
-        appBarRef,
-        useCallback(() => {
-            setAppBarHeight(appBarRef.current?.clientHeight ?? 0);
-        }, [appBarRef.current]),
-    );
-    useLayoutEffect(() => {
-        if (!override.status) {
-            setAppBarHeight(0);
-        }
-
-        return () => setAppBarHeight(0);
-    }, [override.status]);
 
     const isMainRoute = NAVIGATION_BAR_ITEMS.some(({ path, show }) => {
         if (isMobileWidth && show === 'desktop') {
@@ -87,6 +74,25 @@ export function DefaultNavBar() {
         [NavBarComponent, visibleNavBarItems],
     );
 
+    useResizeObserver(
+        appBarRef,
+        useCallback(() => {
+            setAppBarHeight(appBarRef.current?.clientHeight ?? 0);
+        }, [appBarRef.current]),
+    );
+
+    useLayoutEffect(() => {
+        if (override.status) {
+            setAppBarHeight(0);
+            setNavBarWidth(0);
+        }
+
+        return () => {
+            setAppBarHeight(0);
+            setNavBarWidth(0);
+        };
+    }, [override.status]);
+
     useLayoutEffect(() => {
         if (!isMobileWidth) {
             // do not reset navbar width to prevent grid from jumping due to the changing grid item width