diff --git a/express/code/scripts/color-shared/toolbar/createFloatingToolbar.js b/express/code/scripts/color-shared/toolbar/createFloatingToolbar.js
index d282961f2..afd114e72 100644
--- a/express/code/scripts/color-shared/toolbar/createFloatingToolbar.js
+++ b/express/code/scripts/color-shared/toolbar/createFloatingToolbar.js
@@ -361,6 +361,7 @@ export async function initFloatingToolbar(container, options = {}) {
       const isVisible = entries[0].isIntersecting || entries[0].intersectionRatio > 0;
       wrapper.classList.toggle('ax-toolbar-footer-hidden', isVisible);
       if (isVisible) {
+        toolbar.closeDrawer?.();
         wrapper.setAttribute('aria-hidden', 'true');
         wrapper.setAttribute('inert', '');
       } else {
diff --git a/express/code/scripts/color-shared/toolbar/createToolbarComponent.js b/express/code/scripts/color-shared/toolbar/createToolbarComponent.js
index 9ff7e5ad9..4310cf2fb 100644
--- a/express/code/scripts/color-shared/toolbar/createToolbarComponent.js
+++ b/express/code/scripts/color-shared/toolbar/createToolbarComponent.js
@@ -580,6 +580,12 @@ export function createToolbar(options) {
         nameInput.value = newName;
       }
     },
+    closeDrawer() {
+      if (activeDrawer?.isOpen) {
+        activeDrawer.close();
+        activeDrawer = null;
+      }
+    },
     setVariant(nextVariant = 'standalone') {
       const resolvedVariant = nextVariant === 'sticky' ? 'sticky' : 'standalone';
       if (resolvedVariant === currentVariant) return;