如何用Bootstrap 4 SASS修改导航栏背景悬停与激活颜色？

Hey there! I totally get the frustration of digging through variables and not finding exactly what you need—let's fix that. The Bootswatch Slate theme achieves its navbar hover/active effects with a mix of variable overrides and targeted CSS, and we can replicate that for your blue navbar easily.

First, Why You Didn't Find the Variable in Bootswatch Files #

Slate's navbar hover styles aren't always defined in a single obvious variable. Sometimes the theme uses nested CSS rules in the _bootswatch.scss file to tweak Bootstrap's default navbar behavior, rather than relying solely on top-level variables. That's why your initial search didn't turn up a direct $navbar-hover-bg variable!

Solution 1: Use Bootstrap SCSS Variables (Best for Custom Builds) #

If you're working with Bootstrap's SCSS source, you can override core variables to define your blue navbar and its hover/active states. This keeps your code clean and aligned with Bootstrap's structure:

// Define your base blue navbar color (replace with your preferred blue)
$navbar-bg: #0d6efd; // Bootstrap's default primary blue, adjust as needed

// Set hover state styles
$navbar-hover-color: #ffffff;
$navbar-hover-bg: darken($navbar-bg, 10%); // Darken the base blue by 10% for hover

// Set active state styles (darker than hover, like Slate)
$navbar-active-color: #ffffff;
$navbar-active-bg: darken($navbar-bg, 15%); // Darken by 15% for active

// Import Bootstrap's navbar component after setting variables
@import "bootstrap/scss/navbar";

The darken() function automatically adjusts your base blue to a deeper shade—perfect for matching Slate's subtle hover/active contrast.

Solution 2: Custom CSS (For Precompiled Bootstrap) #

If you're using the precompiled Bootstrap CSS file, just add this custom CSS to override the default styles. This works even if you can't modify the SCSS:

/* Target regular nav links */
.navbar-nav .nav-link:hover {
  background-color: #0a58ca; /* Deeper shade of your blue */
  color: #ffffff;
}

.navbar-nav .nav-link.active {
  background-color: #084298; /* Even deeper for active state */
  color: #ffffff;
}

/* If you have dropdown menus, add this too */
.navbar-nav .dropdown-item:hover {
  background-color: #0a58ca;
  color: #ffffff;
}

Just swap the hex codes with shades that match your specific blue navbar—make sure the hover/active colors are dark enough to create clear contrast with white text, like Slate does.

Quick Check of Bootswatch Slate's Code #

If you want to peek at how Slate does it, look in the _bootswatch.scss file for sections like this:

.navbar {
  .nav-link {
    &:hover,
    &:focus {
      background-color: rgba(255,255,255,.1); // Slate uses a semi-transparent white overlay on its dark navbar
      color: #fff;
    }
    &.active {
      background-color: rgba(255,255,255,.2);
      color: #fff;
    }
  }
}

Since your navbar is blue instead of dark gray, you'll use darker blues instead of semi-transparent white, but the logic is the same—create a subtle contrast shift on hover/active.

内容的提问来源于stack exchange，提问作者Caverman