Hamburger Hover

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<html>
  <body>
    <nav class="navbar navbar-dark bg-dark justify-content-center text-light" style="height: 3.5rem;">

    <!-- Hamburger Menu-->
    <div class="col-2 col-sm-4 align-content-start">
        <div class="hamburger link-simple">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

    <!-- Topic Name -->
    <div class="col-9 col-sm-4 text-center">
        <span class="navbar-brand mb-0 h1">Heading</span>
    </div>

    <!-- User Info / Menu -->
    <div class="col-1 col-sm-4 text-right align-content-end">
        X
    </div>

</nav>
  </body>
</html>

CSS

.hamburger {
    height: 80%;
    width: 2rem;
    border: 1px solid white;
    padding: 0px 5px;
    border-radius: 5px;
}

.hamburger, hamburger div {
    transition: all .15s;
}

.hamburger div {
    margin: 0.4rem 0px;
    border: 1px solid white;
    background-color: white;
    border-radius: 5px;
}

.hamburger:hover div {
  border-color: #343a40;
}
.hamburger:hover {
	box-shadow: 0 0 0 .2rem rgba(108,117,125,.5);
	background-color: white;
  border-color: #343a40;
}

.link-simple {
  cursor: pointer;
}