fix(theme): nav bg not being applied on some viewport

src/client/theme-default/components/VPNavBar.vue

@@ -66,8 +66,7 @@ const classes = computed(() => ({
   pointer-events: none;
 }
 
-.VPNavBar.has-sidebar,
-.VPNavBar.fill {
+.VPNavBar.has-sidebar {
   border-bottom-color: var(--vp-c-gutter);
 }
 
@@ -82,6 +81,15 @@ const classes = computed(() => ({
     border-bottom-color: transparent;
     padding: 0;
   }
+
+  .VPNavBar.fill {
+    border-bottom-color: var(--vp-c-gutter);
+    background-color: var(--vp-nav-bg-color);
+  }
+
+  .VPNavBar.has-sidebar.fill {
+    background-color: transparent;
+  }
 }
 
 .container {
@@ -109,10 +117,6 @@ const classes = computed(() => ({
   transition: background-color 0.5s;
 }
 
-.VPNavBar.fill .title {
-  background-color: var(--vp-nav-bg-color);
-}
-
 @media (min-width: 960px) {
   .VPNavBar.has-sidebar .title {
     position: absolute;
@@ -161,12 +165,9 @@ const classes = computed(() => ({
   transition: background-color 0.5s;
 }
 
-.VPNavBar.fill .content-body {
-  background-color: var(--vp-nav-bg-color);
-}
-
 @media (min-width: 960px) {
-  .VPNavBar.has-sidebar .content-body {
+  .VPNavBar.has-sidebar .content-body,
+  .VPNavBar.fill .content-body {
     position: relative;
     background-color: var(--vp-nav-bg-color);
   }