Bootstrap 4 navbar - no height on mobile - navbar

Question

How to set the bootstrap 4 navbar height in all viewport to 80px ?
I tried "min-height: 80px" in ".navbar" but the navbar is broken.
The sass code:
$navbar-bg: #26f3fd;
$navbar-height: 80px;
.navbar {
background-color: $navbar-bg;
min-height: $navbar-height;
}
The html code:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded" id="main-navbar" data-toggle="sticky-onscroll">
<button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbar-content">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="<?= esc_url(home_url('/')); ?>">Accueil</a>
</li>
</ul>
</div>
http://codepen.io/juavenel/pen/xqMPrQ/

Answer 1

The issue is because your navbar doesn't contain a navbar-brand so it's height collapses when the navbar stacks vertically.
This is a known issue that will be fixed in the beta release: https://github.com/twbs/bootstrap/pull/22230
The workaround is to include an empty placehold navbar-text or navbar-brand..
<nav class="navbar navbar-toggleable-md navbar-light bg-faded py-3" id="main-navbar">
<button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-text"> </span>
<div class="collapse navbar-collapse justify-content-md-center" id="navbar-content">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Accueil</a>
</li>
</ul>
</div>
</nav>
http://www.codeply.com/go/FIKesgfDhL
Also, you can use vertical padding (py-3) instead to increase the height of the navbar and keep items vertically centered.