Bootstrap navbar hamburger icon does not align vertically - html

Question

I use fluent kit with bootstrap 4.1.2.
From the navbar docs (I want this one because the toggler changes its icon on open / close) I did take the second example, from the #position section. However, the hamburger is not centered vertically. How can I fix it?
Navbar with wrong hamburger:
I tried removing padding but it didn't help and I am stuck.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/nespero/fluent-kit#1.3.0/js/fluent-kit.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/nespero/fluent-kit#1.2.0/css/fluent-kit.min.css" rel="stylesheet"/>
<nav class="navbar navbar-dark bg-dark py-2">
<strong class="navbar-text">
Navbar position example
</strong>
<button class="btn mi navbar-toggler shadow-none mt-0" type="button" data-toggle="collapse" data-target="#navbar-position" aria-controls="navbar-position" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navbar submenu</span>
</button>
<div class="collapse navbar-collapse" id="navbar-position">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>

Answer 1

Remove .btn class from the <button>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/nespero/fluent-kit#1.3.0/js/fluent-kit.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/nespero/fluent-kit#1.2.0/css/fluent-kit.min.css" rel="stylesheet"/>
<nav class="navbar navbar-dark bg-dark py-2">
<strong class="navbar-text">
Navbar position example
</strong>
<button class="mi navbar-toggler shadow-none mt-0" type="button" data-toggle="collapse" data-target="#navbar-position" aria-controls="navbar-position" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navbar submenu</span>
</button>
<div class="collapse navbar-collapse" id="navbar-position">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>

Answer 2

Add this css code in your css file:
nav.navbar .navbar-toggler {
line-height: 10px;
padding: 0;
}

Answer 3

you can also use transform:translateY to align
.navbar .navbar-toggler {
transform: translateY(-17%);
}

Answer 4

Add this css in your css file.
.navbar .navbar-toggler {
padding: .5rem .75rem;
}