Change the navbar background hover color with Bootstrap 4 SASS

Question

I'm trying to set the hover and active color on the navbar. I've searched and looked at different posts but I can't find anything on how to do this.

I'm trying to do something similar to Bootswatch's Slate theme https://bootswatch.com/slate/ but applied to a blue navbar. I've looked over Bootswatch's _variables and _bootswatch file at the Nav sections to see if I can figure out how they are doing it but I don't see it. I can't find where they are setting any kind of hover background color.

Can anyone point me in the right direction on how I can change the hover/active background color in BS4?

This is my navbar.

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Employee Access</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Logs</a>
                </li>
            </ul>
        </div>
    </nav>

These are from the Slate theme. _bootswatch.scss

// Navbar ======================================================================

.navbar {
  border: 1px solid rgba(0, 0, 0, 0.6);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);

  .container {
    padding: 0;
  }

  .navbar-toggler {
    border-color: rgba(0, 0, 0, 0.6);
  }

  &-fixed-top {
    border-width: 0 0 1px 0;
  }

  &-fixed-bottom {
    border-width: 1px 0 0 0;
  }

  .nav-link {
    padding: 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.2);

    &:hover,
    &:focus {
      @include btn-shadow-inverse($gray-800);
      border-left: 1px solid rgba(0, 0, 0, 0.2);
    }
  }

  &-brand {
    padding: 0.75rem 1rem calc(54px - 0.75rem - 30px);
    margin-right: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
  }

  .nav-item.active .nav-link {
    background-color: rgba(0, 0, 0, 0.3);
    border-left: 1px solid rgba(0, 0, 0, 0.2);
  }

  &-nav .nav-item + .nav-item {
    margin-left: 0;
  }

  &.bg-light {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);

    .nav-link {
      &:hover,
      &:focus {
        @include btn-shadow-inverse($gray-600);
        border-left: 1px solid rgba(0, 0, 0, 0.2);
      }
    }
  }
}

@media (max-width: 576px) {
  .navbar-expand-sm {
    .navbar-brand,
    .nav-link {
      border: none !important;
    }
  }
}

@media (max-width: 768px) {
  .navbar-expand-md {
    .navbar-brand,
    .nav-link {
      border: none !important;
    }
  }
}

@media (max-width: 992px) {
  .navbar-expand-lg {
    .navbar-brand,
    .nav-link {
      border: none !important;
    }
  }
}

_variables.scss

// Navbar

$navbar-padding-y:                  0 !default;

$navbar-dark-hover-color:           $white !default;

$navbar-light-hover-color:          $gray-800 !default;
$navbar-light-active-color:         $gray-800 !default;

UPDATED ANSWER

I wanted give my fix for this with the help I was given to hopefully help someone else. There are probably other ways to do this but it worked for me but I'm up for any suggestions to improve this.

site.scss - I used the following for importing my custom changes to Bootstrap 4

@import "scss/_my-variables.scss";
@import "bootstrap/bootstrap.scss";
@import "scss/_my-theme.scss";

_my-variables.scss - for now I've only changed the color to blue.

$blue: #0078D2;

_my-theme.scss - I used the darken function to set the hover/active colors. That way if you want a different color like Teal or Red then the function will automatically change to that color.

$active-bg-color: darken($blue, 10%);       

.navbar {
    border-bottom: 1px solid darken($active-bg-color, 20%);
}

.nav-link {
    &:hover {
        background-color: $active-bg-color;
    }
}

.navbar-dark .navbar-nav .active > 
.nav-link {
    background-color: $active-bg-color;
}

A. U. A. U. · Accepted Answer · 2018-04-04T19:02:09

You change the background color of active or hover by declaring a new background-color within &:hover and &:focus.

In the _bootswatch.scss, this is what they do:

.nav-link {
  padding: 1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(0, 0, 0, 0.2);

  &:hover,
  &:focus {
    @include btn-shadow-inverse($gray-800);
    border-left: 1px solid rgba(0, 0, 0, 0.2);
  }
}

EDIT

So you would want something like this in your css:

.nav-link {
  &:hover,
  &:active {
    background-color: blue;
  }
}

Working example: https://codepen.io/anon/pen/jzvBaW

Change the navbar background hover color with Bootstrap 4 SASS

1 Answers