From 087752d40b7c94648ee9e5a0f3980c060a1cd395 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Thu, 13 Aug 2026 23:15:47 +0530
Subject: [PATCH] fix(theme): adjust z-index for VPNavBar and simplify
 VPNavScreen styles

---
 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 3f3be7fcecdf..b7ff73e728ae 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 780c6410e963..44d280a2de1b 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;