title: Bootstrap 4 navbar-toggler position change with defined height?
body: <p>Please suggest a better title to this question if you can think of one.</p>
  
  <p>I've run into this problem with two separate projects now. In bootstrap 4, the position of the navbar-toggler button is moving position when clicked if the nav element has a defined height.</p>
  
  <p>I've created a fiddle to display the issue: <a href="https://jsfiddle.net/3xLwf19L/1/" rel="noreferrer">https://jsfiddle.net/3xLwf19L/1/</a></p>
  
  <p>Try clicking the icon whilst .navbar-custom has a height, and try again when no height is defined.</p>
  
  <p>Can anyone explain why this is happening and what, if there is one, the solution is?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav id="site-navbar" class="navbar navbar-expand-lg navbar-light navbar-custom fixed-top smooth-slow"&gt;
      &lt;div class="container"&gt;
          &lt;button class="navbar-toggler .navbar-inverse hamburger-icon" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
  
          &lt;div id="navbarSupportedContent" class="collapse navbar-collapse"&gt;
              &lt;ul class="navbar-nav mx-auto"&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link smooth-slow" href=""&gt;Link&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link smooth-slow" href=""&gt;Link&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.navbar-custom {
      /*height: 80px;*/
      background-color: #FDC529;
      font-family: "Roboto Condensed", sans-serif;
      border-width: 0 0 1px; 
  }
  </code></pre>