Bootstrap navbar hamburger icon does not align vertically

  • A+
Category:Languages

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:

Bootstrap navbar hamburger icon does not align vertically

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>

 


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>

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: