Bootstrap 4 Change nav link hover color

Question

I am creating a website with Bootstrap 4 and Sass (scss). The problem I am running into is the fact that the links in my nav are gray and not blue as I would like to have them.

Every topic I can find about this subject suggests to override the styling of the nav item. In my opinion this is going to bite you in the back later on when developing. So overriding the variable instead of the styling has my preference, but somehow it is not working correctly for me.

I have overridden the bootstrap styles via de recommended way:

• Create scss file with color overrides
• Change the styles via the $theme-colors function
• import the theme file before the bootstrap.scss file.

My _theme.scss is as follows:

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

$blue:      #0053CB;
$blue-700:  #0F2C92;
$white:     #FFFFFF;
$green:     #39CA71;
$red:       #F1453D;
$orange:    #fd7e14;
$yellow:    #FDC02F;

$gray-100:  rgba(0,0,0,.03);

$theme-colors: (
  primary: $blue,
  secondary: $white,
  light: $white,
  dark: $blue-700,
  success: $green,
  warning: $orange,
  danger: $red,
);

// Import bootstrap as last so that the variables will be overridden
@import '~bootstrap/scss/bootstrap';

The bootstrap code for the $link-hover-color (is used for the nav-link) is as follows:

$link-color:                theme-color("primary") !default;
$link-hover-color:          darken($link-color, 15%) !default;

The problem is that the theme colors I defined are correctly used when using bg-primary in my html for example, but the hover and link colors are not the blue color I expected, they are gray, like the default. Is there something I a missing in my setup or am I doing something wrong?

Answer 1

$link-color and $link-hover-color affect links on the page, but not Navbar nav-links, which are specifically set via $navbar-light-color and/or $navbar-dark-color variables. These are defined using lightness/darkness of $black or $white as you can see in variables.scss.

Therefore, assuming you'd want blue (darker) links on a lighter background, you'd probably want to set the Navbar nav-link color as...

$navbar-light-color: rgba($primary, .5);
$navbar-light-hover-color: rgba($primary, .7);
$navbar-light-active-color: rgba($primary, .9);

Demo: https://www.codeply.com/go/66E7nUGVxD

---

The above is for SASS. You can still customize the Navbar with CSS only: Bootstrap 4 navbar color