From: Mark Otto <markd.otto@gmail.com>
Date: Fri, 13 Mar 2026 00:50:46 +0000 (-0700)
Subject: Revamp some examples, update navbars to have fallback values for easier color modes... 
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=3e61b29db2727cf34e4cc06b2772b862319bd0c7;p=thirdparty%2Fbootstrap.git

Revamp some examples, update navbars to have fallback values for easier color modes (#42164)
---

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 10842fd460..2296f12469 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 7ba554933c..40bad71b37 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 92fdabe0f9..d48e3abf14 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;