Bootstrap navbar-fixed-top breaks when increasing height - css

Question

So I have a navbar-fixed-top that's set to collapse at 992px, most mobile screens wont collapse at anything lower than that anymore. Well, from what I can tell anyway. The problem is that when I try increase the navbar height at the lower screen width, I cant vertically center anything on the navbar - being the placeholder for the logo to come or the dropdown button. I'm also struggling to increase the size of the dropdown button no matter what I try. Finally as soon as I increase the height of the navbar, when I click the dropdown menu, the background image disappears yet it works fine with the default height. I'm really hoping someone knows a trick or two as it seems lots of people are struggling with navbar-fixed-top.
Here's the html setup:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsed-navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="collapsed-navbar">
<ul class="nav navbar-nav">
<li><a ng-href="#link">Link 1</a></li>
<li><a ng-href="#link">Link 2</a></li>
<li><a ng-href="#link">Link 3</a></li>
<li><a ng-href="#link">Link 4</a></li>
<li class="divider"></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><img class="img-circle nav-profile-image" src="images/default_pic.png" /></li>
<li><a ng-href="#link">Profile</a></li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
And here's the CSS so far:
#media (max-width: 992px) {
.nav-profile-image {
display: none;
}
.navbar {
height: 80px;
font-size: 24px;
}
}
#media (min-width: 992px) {
.nav-profile-image {
height: 40px;
margin-top: 5px;
}
}
.navbar {
background-image: url('../images/noise-background.jpg');
background-color: #F8F8F8;
}
.navbar-default .navbar-nav > li > a:hover {
color: #555;
background-color: #E7E7E7;
opacity: 0.6;
}
.navbar-default .navbar-nav > .active > a:hover {
color: #555;
background-color: #E7E7E7;
opacity: 1;
}
Thanks in advance!