Hamburger button log in goes to the bottom - css

Question

I am trying to create the login from the right side go to the top of the hamburger button menu when it becomes responsive (obviously inside of it with the other tabs). I am assuming that I would have to write a media query or if there is a way to apply a different class in that media query...but I have no idea how to do it. Also, I am using bootstrap for it.
This is what I have so far:
<div class="navbar navbar-inverse navbar-fixed-top" id="navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">HEALTHY LIFE FITNESS</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Clubs
<li>Classes
<li>Training
<li>Pilates
<li>Join
</li>
</ul>
<button type="button" id="login" class="btn btn-default navbar-btn pull-right" style="margin:10px 10px 0px 0px;">Log In</button>
</div>
</div><!--end navbar-->
CSS:
#navbar{background-color: rgb(18,18,28);}
.navbar-toggle .icon-bar:nth-of-type(2) {
top: 1px;
}
.navbar-toggle .icon-bar:nth-of-type(3) {
top: 2px;
}
.navbar-toggle .icon-bar {
position: relative;
transition: all 500ms ease-in-out;
}
.navbar-toggle.active .icon-bar:nth-of-type(1) {
top: 6px;
transform: rotate(45deg);
}
.navbar-toggle.active .icon-bar:nth-of-type(2) {
background-color: transparent;
}
.navbar-toggle.active .icon-bar:nth-of-type(3) {
top: -6px;
transform: rotate(-45deg);
}
JS:
$(document).ready(function () {
$(".navbar-toggle").on("click", function () {
$(this).toggleClass("active")
});
});