0

I have an Angular MDBoostrap nav bar that I styled using SCSS. When I added a dropdown tab I noticed that the font color and background color both change to white 'on-hover' like this. 

<!-- Links -->
<ul class="navbar-nav mr-auto custom-nav">
  <li class="nav-item">
    <a class="nav-link waves-light" mdbWavesEffect [routerLink]="['about']">About<span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item page-scroll">
    <a class="nav-link waves-light" mdbWavesEffect [routerLink]="['contact']">Contact</a>
  </li>
  <li class="nav-item">
    <a class="nav-link waves-light" mdbWavesEffect [routerLink]="['support']">Support</a>
  </li>
  <li class="nav-item dropdown btn-group" dropdown>
    <a dropdownToggle type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect >Products </a>
    <div class="dropdown-menu dropdown-primary dropdown-menu-xl-right" role="menu">
      <a class="dropdown-item" [routerLink]="['products']">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </li>
 </ul>
<!-- Links -->

I have tried creating a custom scss style to overwrite the bootstrap style:

.custom-nav{
  color: #ffffff;
  font-size: larger;
  font-family: Impact;

  a {
    color: white;
    font-family: Calibri;
    font-size: 17px;
  }

  li {
    margin-left: 20px;
  }

}

.dropdown-item:hover{
  color: black;
}

I have also tried everything suggested here. Does anyone know where or how to locate this bootstrap style because I can't inspect the 'on-hover' effect to find where it is coming from.

DevJohn
  • 3
  • 2

1 Answers1

0

To overwrite the bootstap nav dropdown item on hover color, just change the "skin-accent" to what ever color you prefer.

Reference this for help creating custom skins: mdbootstrap.com

JakeFromSF
  • 319
  • 2
  • 12