diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts
index 9e41af9..7160492 100644
--- a/quartz/components/scripts/explorer.inline.ts
+++ b/quartz/components/scripts/explorer.inline.ts
@@ -266,7 +266,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
     }
   }
 
-  const hiddenUntilDoneLoading = document.querySelector("#mobile-explorer")
+  const hiddenUntilDoneLoading = document.querySelector(".mobile-explorer")
   hiddenUntilDoneLoading?.classList.remove("hide-until-loaded")
 })
 
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index c284cb2..69f7909 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -212,8 +212,8 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
       flex: 0 0 34px;
 
       & > .explorer-content {
-        transform: translateX(-100vw);
-        visibility: hidden;
+        transform: translateX(0);
+        visibility: visible;
       }
     }
 
@@ -221,8 +221,8 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
       flex: 0 0 34px;
 
       & > .explorer-content {
-        transform: translateX(0);
-        visibility: visible;
+        transform: translateX(-100vw);
+        visibility: hidden;
       }
     }
 
@@ -236,7 +236,7 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
       background-color: var(--light);
       max-width: 100vw;
       width: 100%;
-      transform: translateX(-100vw);
+      transform: translateX(0);
       transition:
         transform 200ms ease,
         visibility 200ms ease;