diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue
index ca3857a7..34578b2c 100644
--- a/src/client/theme-default/components/VPNav.vue
+++ b/src/client/theme-default/components/VPNav.vue
@@ -2,6 +2,7 @@
 import { provide } from 'vue'
 import { useSidebar } from '../composables/sidebar'
 import { useNav } from '../composables/nav'
+import { useSidebar } from '../composables/sidebar'
 import VPNavBar from './VPNavBar.vue'
 import VPNavScreen from './VPNavScreen.vue'
 
@@ -31,10 +32,8 @@ provide('close-screen', closeScreen)
   .VPNav {
     position: fixed;
   }
-}
 
-@media (min-width: 960px) {
-  .no-sidebar {
+  .VPNav.no-sidebar {
     backdrop-filter: saturate(50%) blur(8px);
   }
 }
diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
index 3b20000f..0a50532d 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useSidebar } from '../composables/sidebar'
 import VPNavBarTitle from './VPNavBarTitle.vue'
 import VPNavBarSearch from './VPNavBarSearch.vue'
 import VPNavBarMenu from './VPNavBarMenu.vue'
@@ -7,7 +8,6 @@ import VPNavBarAppearance from './VPNavBarAppearance.vue'
 import VPNavBarSocialLinks from './VPNavBarSocialLinks.vue'
 import VPNavBarExtra from './VPNavBarExtra.vue'
 import VPNavBarHamburger from './VPNavBarHamburger.vue'
-import { useSidebar } from '../composables/sidebar'
 
 const { hasSidebar } = useSidebar()
 
@@ -21,11 +21,11 @@ defineEmits<{
 </script>
 
 <template>
-  <div class="VPNavBar">
+  <div class="VPNavBar" :class="{ 'has-sidebar' : hasSidebar }">
     <div class="container">
       <VPNavBarTitle />
 
-      <div class="content" :class="{ 'has-sidebar' : hasSidebar }">
+      <div class="content">
         <VPNavBarSearch class="search" />
         <VPNavBarMenu class="menu" />
         <VPNavBarTranslations class="translations" />
@@ -63,6 +63,10 @@ defineEmits<{
     height: var(--vp-nav-height-desktop);
     border-bottom: 0;
   }
+
+  .VPNavBar.has-sidebar .content {
+    backdrop-filter: saturate(50%) blur(8px);
+  }
 }
 
 .container {
@@ -79,12 +83,6 @@ defineEmits<{
   flex-grow: 1;
 }
 
-@media (min-width: 960px) {
-  .has-sidebar {
-    backdrop-filter: saturate(50%) blur(8px);
-  }
-}
-
 .menu + .translations::before,
 .menu + .appearance::before,
 .menu + .social-links::before,