JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<body>
  <nav class='navbar navbar-default.navbar-static-top navbar-custom'>
    <div class='container-fluid'>
      <ul class='nav navbar-nav navbar-left'>
        <li><a href="dashboard.html">Dashboard</a></li>
        <li><a href="/grades">Grades</a></li>
        <li><a href="/classes">Classes</a></li>
      </ul>
      <ul class='nav navbar-nav navbar-right'>
        <li><a href="/messages"><i class="fa fa-envelope fa-lg"></i></a></li>

        <!--probably has to do with the link, clicking it then clicking it again-->
        <li><a class="dropdown-toggle dropdown-custom" data-toggle="dropdown" href="/profile"><i class="fa fa-user fa-lg"></i></a>
          <ul class="dropdown-menu">
            <li><a href="/profile.html">Edit profile</a></li>
            <li><a href="/settings">Edit Preferences</a></li>
          </ul>
        </li>
        <li><a href="/logout"><i class="fa fa-power-off fa-lg"></i></a></li>
      </ul>

    </div>
  </nav>
</body>

CSS

.nav>li>a:hover, .nav>li>a:focus {
  background-color: transparent;
}

.navbar-custom {
  background-color: #586F7C;
}

.navbar-custom a {
  color: #F4F4F9;
}

.navbar-custom a:hover {
  color: #F4F4F9;
}

.navbar-custom .nav > li > a:hover {
  background-color: #2F4550;
}

.navbar .navbar-nav > li.open > a {
  background-color: #586F7C;
}

.navbar .navbar-nav > li.open > a:hover,
.navbar .navbar-nav > li.open > a:focus {
  background-color: #2F4550;
}