diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
index 970c3cee..30525858 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -52,13 +52,6 @@ const { hasSidebar } = useSidebar()
   transition: border-color 0.5s, background-color 0.5s;
 }
 
-
-@media (min-width: 768px) {
-  .VPNavBar.has-sidebar {
-    padding-right: 0;
-  }
-}
-
 @media (min-width: 768px) {
   .VPNavBar {
     padding: 0 32px;
@@ -72,6 +65,8 @@ const { hasSidebar } = useSidebar()
   }
 
   .VPNavBar.has-sidebar .content {
+    margin-right: -32px;
+    padding-right: 32px;
     backdrop-filter: saturate(50%) blur(8px);
     -webkit-backdrop-filter: saturate(50%) blur(8px);
   }
diff --git a/src/client/theme-default/components/VPNavBarSocialLinks.vue b/src/client/theme-default/components/VPNavBarSocialLinks.vue
index 2578919f..e5dfd630 100644
--- a/src/client/theme-default/components/VPNavBarSocialLinks.vue
+++ b/src/client/theme-default/components/VPNavBarSocialLinks.vue
@@ -1,19 +1,14 @@
 <script lang="ts" setup>
 import { useData } from 'vitepress'
 import VPSocialLinks from './VPSocialLinks.vue'
-import { useSidebar } from '../composables/sidebar'
 
 const { theme } = useData()
-const { hasSidebar } = useSidebar()
 </script>
 
 <template>
   <VPSocialLinks
     v-if="theme.socialLinks"
-    :class="{
-      'VPNavBarSocialLinks' : true,
-      'has-sidebar' : hasSidebar
-    }"
+    class="VPNavBarSocialLinks"
     :links="theme.socialLinks"
   />
 </template>
@@ -29,8 +24,4 @@ const { hasSidebar } = useSidebar()
     align-items: center;
   }
 }
-
-.has-sidebar {
-  padding-right: 32px;
-}
 </style>