diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
index 4e27b1f6..970c3cee 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -52,6 +52,13 @@ 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;
diff --git a/src/client/theme-default/components/VPNavBarSocialLinks.vue b/src/client/theme-default/components/VPNavBarSocialLinks.vue
index e5dfd630..2578919f 100644
--- a/src/client/theme-default/components/VPNavBarSocialLinks.vue
+++ b/src/client/theme-default/components/VPNavBarSocialLinks.vue
@@ -1,14 +1,19 @@
 <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"
+    :class="{
+      'VPNavBarSocialLinks' : true,
+      'has-sidebar' : hasSidebar
+    }"
     :links="theme.socialLinks"
   />
 </template>
@@ -24,4 +29,8 @@ const { theme } = useData()
     align-items: center;
   }
 }
+
+.has-sidebar {
+  padding-right: 32px;
+}
 </style>