Fix for missing CSS variables on `.navbar-nav` (#36105)

* Fix for missing CSS variables on .navbar-nav

* Document new CSS vars on .navbar-nav

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 8fbdab71d68ed886ba6881055af39ea590555311..6db562519c62ede560fd9b1eb1007affb205c052 100644 (file)
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -84,27 +84,20 @@
 // Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
 
 .navbar-nav {
+  // scss-docs-start navbar-nav-css-vars
+  --#{$prefix}nav-link-padding-x: 0;
+  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
+  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
+  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
+  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
+  // scss-docs-end navbar-nav-css-vars
+
   display: flex;
   flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
   padding-left: 0;
   margin-bottom: 0;
   list-style: none;
 
-  .nav-link {
-    padding-right: 0;
-    padding-left: 0;
-    color: var(--#{$prefix}navbar-color);
-
-    &:hover,
-    &:focus {
-      color: var(--#{$prefix}navbar-hover-color);
-    }
-
-    &.disabled {
-      color: var(--#{$prefix}navbar-disabled-color);
-    }
-  }
-
   .show > .nav-link,
   .nav-link.active {
     color: var(--#{$prefix}navbar-active-color);

diff --git a/site/content/docs/5.1/components/navbar.md b/site/content/docs/5.1/components/navbar.md
index 7b36f245c1e6478551892e361de9b263d410afb0..392531160d9f1590c68a3ac3d26b0a053d76665c 100644 (file)
--- a/site/content/docs/5.1/components/navbar.md
+++ b/site/content/docs/5.1/components/navbar.md
@@ -742,6 +742,10 @@ As part of Bootstrap's evolving CSS variables approach, navbars now use local CS
 
 {{< scss-docs name="navbar-css-vars" file="scss/_navbar.scss" >}}
 
+Some additional CSS variables are also present on `.navbar-nav`:
+
+{{< scss-docs name="navbar-nav-css-vars" file="scss/_navbar.scss" >}}
+
 ### Sass variables
 
 {{< scss-docs name="navbar-variables" file="scss/_variables.scss" >}}