From 35cf6470d36bfea5f7c53de251382a19275f72a9 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Fri, 14 Aug 2026 00:18:25 +0530
Subject: [PATCH] fix(theme): adjust z-index for VPNavBar and simplify
 VPNavScreen styles (#5374)

---
 src/client/theme-default/components/VPNavBar.vue    |  1 +
 src/client/theme-default/components/VPNavScreen.vue | 11 ++++-------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
index 3f3be7fc..b7ff73e7 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -70,6 +70,7 @@ const { isHome, hasSidebar } = useLayout()
 <style scoped>
 .VPNavBar {
   position: relative;
+  z-index: 1;
   height: var(--vp-nav-height);
   pointer-events: none;
   white-space: nowrap;
diff --git a/src/client/theme-default/components/VPNavScreen.vue b/src/client/theme-default/components/VPNavScreen.vue
index 780c6410..44d280a2 100644
--- a/src/client/theme-default/components/VPNavScreen.vue
+++ b/src/client/theme-default/components/VPNavScreen.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useScrollLock, useWindowScroll } from '@vueuse/core'
+import { useScrollLock } from '@vueuse/core'
 import { inBrowser } from 'vitepress'
 import VPNavScreenAppearance from './VPNavScreenAppearance.vue'
 import VPNavScreenMenu from './VPNavScreenMenu.vue'
@@ -11,7 +11,6 @@ defineProps<{
 }>()
 
 const isLocked = useScrollLock(inBrowser ? document.body : null)
-const { y } = useWindowScroll()
 </script>
 
 <template>
@@ -20,7 +19,7 @@ const { y } = useWindowScroll()
     @enter="isLocked = true"
     @after-leave="isLocked = false"
   >
-    <div v-if="open" class="VPNavScreen" id="VPNavScreen" :style="{ '--vp-y': y + 'px' }">
+    <div v-if="open" class="VPNavScreen" id="VPNavScreen">
       <div class="container">
         <slot name="nav-screen-content-before" />
         <VPNavScreenMenu class="menu" />
@@ -36,15 +35,13 @@ const { y } = useWindowScroll()
 <style scoped>
 .VPNavScreen {
   position: fixed;
-  /* reserve 1px for the VPNavBar divider */
-  top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 1px - var(--vp-y));
+  top: 0;
   /*rtl:ignore*/
   right: 0;
   bottom: 0;
   /*rtl:ignore*/
   left: 0;
-  padding: 0 2rem;
-  padding-top: var(--vp-y);
+  padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 1px) 2rem 0;
   width: 100%;
   background-color: var(--vp-nav-screen-bg-color);
   overflow-y: auto;