CODEWITHSUNDEEP
twitter-bootstrapsassbootstrap-4themes
Mr.wiseguy
Mr.wiseguy

Reputation: 4252

Bootstrap 4 Change nav link hover color

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:

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?

Upvotes: 3

Views: 5284

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362290

$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

Upvotes: 7

Related Questions