Default theme nav bar background does not extend fully

[NonSpicyBurrito]

Describe the bug

Using default theme, nav bar background does not extend fully to the right in widescreen mode, causing customizing with --vp-nav-bg-color to be unusable.

Reproduction

Create a project with default theme with customized CSS:

:root {
    --vp-nav-bg-color: red;
}

Observe that nav bar background does not extend fully to the right in widescreen mode:

Expected behavior

Nav bar background to extend fully.

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (4) x64 Intel(R) Core(TM) i5-6300HQ CPU @ 2.30GHz
    Memory: 2.24 GB / 11.90 GB
  Binaries:
    Node: 20.18.0 - C:\Program Files\nodejs\node.EXE      
    Yarn: 1.22.4 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 134.0.6998.166
    Edge: Chromium (127.0.2651.105)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    vitepress: ^2.0.0-alpha.4 => 2.0.0-alpha.4

Additional context

No response

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[NonSpicyBurrito]

It also does not fully extend to the left if the screen is over the largest breakpoint.

[brc-dd]

Use something like

.VPNav {
    --vp-nav-bg-color: red;
    background-color: var(--vp-nav-bg-color);

    .title .VPNavBarTitle .title {
        border-color: var(--vp-nav-bg-color);
    }
}

[NonSpicyBurrito]

Here's a patch of how I fixed it:

• The right padding is applied to .content, while background color is applied to .content-body, causing not fully extend to the right. To fix this, move the right padding from .content to .content-body.
• Sidebar CSS calculation uses 100%, whereas other related places use 100vw, causing not fully extend to the left. To fix this, change sidebar width calculation to also use 100vw.

diff --git a/node_modules/vitepress/dist/client/theme-default/components/VPNavBar.vue b/node_modules/vitepress/dist/client/theme-default/components/VPNavBar.vue
index d1fbe36..1edd6db 100644
--- a/node_modules/vitepress/dist/client/theme-default/components/VPNavBar.vue
+++ b/node_modules/vitepress/dist/client/theme-default/components/VPNavBar.vue
@@ -172,16 +171,22 @@ watchPostEffect(() => {
   .VPNavBar.has-sidebar .content {
     position: relative;
     z-index: 1;
-    padding-right: 32px;
     padding-left: var(--vp-sidebar-width);
   }
+
+  .VPNavBar.has-sidebar .content-body {
+    padding-right: 32px;
+  }
 }
 
 @media (min-width: 1440px) {
   .VPNavBar.has-sidebar .content {
-    padding-right: calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);
     padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
   }
+
+  .VPNavBar.has-sidebar .content-body {
+    padding-right: calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);
+  }
 }
 
 .content-body {
diff --git a/node_modules/vitepress/dist/client/theme-default/components/VPSidebar.vue b/node_modules/vitepress/dist/client/theme-default/components/VPSidebar.vue
index 35fa783..10ea85b 100644
--- a/node_modules/vitepress/dist/client/theme-default/components/VPSidebar.vue
+++ b/node_modules/vitepress/dist/client/theme-default/components/VPSidebar.vue
@@ -111,8 +111,8 @@ watch(
 
 @media (min-width: 1440px) {
   .VPSidebar {
-    padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
-    width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
+    padding-left: max(32px, calc((100vw - (var(--vp-layout-max-width) - 64px)) / 2));
+    width: calc((100vw - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
   }
 }
 

I'm uncertain if this is the proper way to fix the issue, however if it is, I can apply the fix to source code and open a PR.

[takemoto61]

write below css in style.css.

.VPNav {
background-color: red;
}

:root {
--vp-nav-bg-color: transparent;
}

[NonSpicyBurrito]

The two solutions given by @brc-dd and @takemoto61 don't quite work, they conflict with the following features in the default theme:

• On home page, on mobile navbar background is transparent by default, and changes to colored when you open the hamburger menu; on desktop navbar background is also transparent by default, and changes to colored when you scroll down.
• On article pages, on desktop sidebar should render on top of navbar.

The patch I gave correctly preserves these features from default theme.