From 0323fe99d2b696ccb539b121387e174eaf209c17 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Wed, 6 Apr 2022 13:08:07 -0700
Subject: [PATCH] Fix for missing CSS variables on `.navbar-nav` (#36105)

* Fix for missing CSS variables on .navbar-nav

* Document new CSS vars on .navbar-nav
---
 scss/_navbar.scss                          | 23 ++++++++--------------
 site/content/docs/5.1/components/navbar.md |  4 ++++
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 8fbdab71d6..6db562519c 100644
--- 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 7b36f245c1..392531160d 100644
--- 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" >}}