<!-- the ripple on nav-link is forces to light ? -->

<!-- How to get a dark ripple in the navbar ? -->

<nav class="navbar navbar-expand-lg navbar-light fixed-top white">

  <!-- Toggle -->

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navCollapsible" 

    aria-controls="navCollapsible" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <!-- Collapsible menu -->

  <div class="collapse navbar-collapse" id="navCollapsible">

    <!-- Nav links -->

    <ul class="navbar-nav mr-auto">

      <li class="nav-item active waves-effect waves-red">

        <a class="nav-link" href="#">Menu A</a>

      </li>

      <li class="nav-item waves-effect waves-black">

        <a class="nav-link" href="#">Menu B</a>

      </li>

    </ul>

    <!-- /Nav links -->

  </div>

  <!-- /Collapsible menu-->

</nav>

<!-- /Navbar -->

​

<!-- Spacer -->

<div style="height:80px"></div>

​

<!--dark wave-->

<a class="btn btn-primary waves-effect waves-yellow">Button with dark waves</a>

​

<!--light waves-->

<a class="btn btn-primary waves-light waves-teal">Button with light waves</a>

​