title: Smaller Than Default Navbar Height Causing Issues
body: <p>I like the look of a smaller-than-normal <code>navbar</code> height, as it seems to be a popular design trend.</p>
  
  <p>However, this seems to be causing issues when opening a <code>collapse</code> menu.</p>
  
  <p>Here you can see the stages of expanding the <code>collapse navbar-collapse</code> menu. First is my normal <code>navbar</code> 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.</p>
  
  <p><a href="https://i.stack.imgur.com/gFA7M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gFA7M.png" alt="navbar height issue"></a></p>
  
  <p>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 <code>navbar</code> height.</p>
  
  <p>Any ideas why this is happening? Or, is there something else in my styling that has nothing to do with the <code>navbar</code> height yet is causing the issue?</p>
  
  <pre><code>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 &gt; li,
  .navbar-nav &gt; li &gt; a,
  .navbar-nav &gt; li &gt; a:link,
  .navbar-nav &gt; li &gt; 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 &gt; li,
    .navbar-nav &gt; li &gt; a,
    .navbar-nav &gt; li &gt; a:link,
    .navbar-nav &gt; li &gt; a:visited,
    .navbar-nav &gt; li &gt; 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;
    }
  
  }
  
  
  &lt;div class="navbar navbar-default navbar-fixed-top"&gt;
  
                &lt;div class="container"&gt;
  
                     &lt;div class="navbar-header"&gt;
  
                          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
  
                               &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
  
                               &lt;span class="icon-bar top-bar"&gt;&lt;/span&gt;
                               &lt;span class="icon-bar middle-bar"&gt;&lt;/span&gt;                               
                               &lt;span class="icon-bar bottom-bar"&gt;&lt;/span&gt;
  
                          &lt;/button&gt;
  
                          &lt;!--&lt;a href="" class="navbar-brand"&gt;&lt;img class="logo" src="../images/eclipse-new.png"/&gt;&lt;/a&gt; --&gt;
                          &lt;a href="#" class="navbar-brand"&gt;Eclipse Music&lt;/a&gt;
  
                     &lt;/div&gt; &lt;!-- end of navbar-header --&gt;
  
                     &lt;div id="navbar" class="collapse navbar-collapse"&gt;
  
                           &lt;ul class="nav navbar-nav"&gt;
  
                           &lt;!--&lt;li&gt;&lt;a href=""&gt;&lt;span class="glyphicon glyphicon-home"&gt;&lt;/span&gt;Home&lt;/a&gt;&lt;/li&gt;--&gt;
                            &lt;li&gt;&lt;a href=""&gt;Effects&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="http://www.eclipsemusic.org/guitars-basses-and-amps"&gt;Guitar&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href=""&gt;Bass&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href=""&gt;Amps&lt;/a&gt;&lt;/li&gt;
  
                            &lt;li&gt;&lt;a href=""&gt;Lessons&lt;/a&gt;&lt;/li&gt;
                            &lt;li class="dropdown"&gt;
  
                                 &lt;a href="about/about.php"&gt;About&lt;!--&amp;nbsp;&lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;--&gt;&lt;/a&gt;
  
                                 &lt;ul class="dropdown-menu"&gt;
                                       &lt;li&gt;&lt;a href="#"&gt;Directions&lt;/a&gt;&lt;/li&gt;
                                       &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                                       &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                                 &lt;/ul&gt;
  
                            &lt;/li&gt;
  
                           &lt;/ul&gt;
  
                     &lt;/div&gt; &lt;!-- end of collapse navbar-collapse --&gt;
  
                &lt;/div&gt; &lt;!-- end of container --&gt;
  
           &lt;/div&gt; &lt;!-- end of navbar navbar-default navbar-fixed-top --&gt;
  </code></pre>
  
  <p><a href="https://www.twincataudio.com/eclipse/eclipse.html" rel="nofollow noreferrer">Here is my site in progress</a>. I tried copying the styling and markup to JS Fiddle, but it wasn't matching what my webpage shows.</p>