Smaller Than Default Navbar Height Causing Issues - html

Question

I like the look of a smaller-than-normal navbar height, as it seems to be a popular design trend.
However, this seems to be causing issues when opening a collapse menu.
Here you can see the stages of expanding the collapse navbar-collapse menu. First is my normal navbar with a minimum height of 30px. Then when I click the toggle button, the navbar briefly expands to what appears to be 50px, and finally the full screen menu appears.
This alone isn't a big deal (though I would prefer a smooth transition), however the expand and collapse animations of the menu don't seem to behave as expected with a decreased navbar height.
Any ideas why this is happening? Or, is there something else in my styling that has nothing to do with the navbar height yet is causing the issue?
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Quicksand', sans-serif;
}
body {
margin-top: 60px;
}
#main-wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
.container {
margin: 0 auto;
}
.article {
flex: 1;
}
/*START Shrinks the default navbar height*/
.navbar {
min-height: 30px;
//max-height: 40px;
margin: 0px;
width: 100%;
background-color: #444;
}
.navbar-nav > li,
.navbar-nav > li > a,
.navbar-nav > li > a:link,
.navbar-nav > li > a:visited {
padding: 4px 5px 0px 5px;
//height: 30px;
color: white;
font-size: 1.1em;
font-weight: 300;
margin: 2px 8px 0 0;
}
/*END*/
.nav.navbar-nav li a:focus,
.nav.navbar-nav li a:active,
.nav.navbar-nav li a:hover {
color: white;
opacity: 0.8;
}
.navbar-toggle {
float: left;
border: none;
margin-top: 10px;
margin-left: 10px;
padding: 4px;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:active,
.navbar-default .navbar-toggle:focus {
background-color: #444;
}
/*Displays navbar dropdown on hover */
ul.nav li.dropdown:hover ul.dropdown-menu {
display: block;
}
.navbar-default .navbar-header .icon-bar {
background-color: white;
width: 22px;
}
.navbar-default .navbar-toggle:hover .icon-bar {
background-color: #EFEFEF;
}
.navbar .navbar-brand {
color: white;
margin: -4px 20px -3px 0;
font-size: 1.7em;
font-family: 'Orbitron', 'Dosis', sans-serif;
}
.navbar .navbar-brand:focus,
.navbar .navbar-brand:hover {
color: white;
opacity: 0.8;
}
/*Change hamburger menu to "x" on click */
.navbar-toggle .icon-bar {
width: 22px;
transition: all 0.4s;
}
.navbar-toggle .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
opacity: 0;
}
.navbar-toggle .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
transform: rotate(0);
}
.navbar.navbar-default .navbar-collapse {
border: none;
box-shadow: none;
}
/*Change Background color of toggle dropdown*/
.collapse.navbar-collapse {
background-color: #444;
min-width: 100%;
min-height: 100%;
}
h3 + p {
line-height: 1.8em;
}
footer {
background-color: #444;
color: white;
height: 250px;
padding: 8px;
min-width: 100%;
margin: 0 auto;
}
footer a,
footer a:link,
footer a:visited {
color: white;
text-decoration: none;
}
footer a:hover,
footer a:active,
footer a:focus {
opacity: 0.8;
}
.tagline {
text-align: center;
}
.footer-sub {
border: thin white solid;
margin: 0 2px 7px 0;
float: left;
width: 200px;
padding: 5px;
}
.fa-plus {
margin-top: 3px;
float: right;
}
.fa-plus:hover {
opacity: 0.8;
cursor: pointer;
}
#location-detail {
display: none;
}
a#location:focus + #location-detail {
display: block;
}
#media (max-width: 992px) {
.navbar-nav > li,
.navbar-nav > li > a,
.navbar-nav > li > a:link,
.navbar-nav > li > a:visited,
.navbar-nav > li > a:hover {
font-size: 1.05em;
}
}
#media (max-width: 767px) {
.navbar .navbar-brand {
position: absolute;
left: 50%;
margin-left: -110px !important;
display: block;
}
.navbar-collapse {
text-align: center;
}
.navbar-collapse li {
display: none;
}
.collapse.navbar-collapse {
background-color: #444;
position: fixed;
min-width: 100%;
min-height: 100%;
font-size: 1.3em;
text-align: center;
padding-top: 20px;
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: linear;
}
.collapse.navbar-collapse li {
display: block;
margin-bottom: 15px;
}
}
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<!--<img class="logo" src="../images/eclipse-new.png"/> -->
Eclipse Music
</div> <!-- end of navbar-header -->
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!--<li><span class="glyphicon glyphicon-home"></span>Home</li>-->
<li>Effects</li>
<li>Guitar</li>
<li>Bass</li>
<li>Amps</li>
<li>Lessons</li>
<li class="dropdown">
About<!-- <i class="fa fa-caret-down"></i>-->
<ul class="dropdown-menu">
<li>Directions</li>
<li>Contact Us</li>
<li>Blog</li>
</ul>
</li>
</ul>
</div> <!-- end of collapse navbar-collapse -->
</div> <!-- end of container -->
</div> <!-- end of navbar navbar-default navbar-fixed-top -->
Here is my site in progress. I tried copying the styling and markup to JS Fiddle, but it wasn't matching what my webpage shows.