diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 10842fd460f2..2296f124693a 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -96,7 +96,8 @@ $navbar-nav-tokens: defaults(
     justify-content: space-between;
     padding: var(--navbar-padding-y) var(--navbar-padding-x);
     @include set-container();
-    @include gradient-bg();
+    color: var(--navbar-color, var(--fg-body));
+    @include gradient-bg(var(--navbar-bg, var(--bg-body)));
 
     // Container properties for nested containers
     %container-flex-properties {
diff --git a/site/src/content/docs/components/navbar.mdx b/site/src/content/docs/components/navbar.mdx
index 7ba554933c9d..40bad71b3790 100644
--- a/site/src/content/docs/components/navbar.mdx
+++ b/site/src/content/docs/components/navbar.mdx
@@ -484,7 +484,7 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and
 `} />
 
 ```html
-<nav class="navbar bg-body border-bottom border-body" data-bs-theme="dark">
+<nav class="navbar" data-bs-theme="dark">
   <!-- Navbar content -->
 </nav>
 
@@ -492,7 +492,7 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and
   <!-- Navbar content -->
 </nav>
 
-<nav class="navbar" style="background-color: #e3f2fd;" data-bs-theme="light">
+<nav class="navbar bg-1" data-bs-theme="light">
   <!-- Navbar content -->
 </nav>
 ```
diff --git a/site/src/scss/_navbar.scss b/site/src/scss/_navbar.scss
index 92fdabe0f9b7..d48e3abf14f5 100644
--- a/site/src/scss/_navbar.scss
+++ b/site/src/scss/_navbar.scss
@@ -13,8 +13,9 @@
   }
 
   .bd-navbar {
+    --bs-navbar-padding-x: 0;
+    --bs-navbar-padding-y: .75rem;
     --bs-border-color: color-mix(in oklch, var(--bs-fg-body) 12%, transparent);
-    padding: .75rem 0;
     margin-bottom: -1px;
     background-clip: padding-box;