Bootstrap navbar hamburger icon does not align vertically

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>

score 6 · Accepted Answer · edited Jul 16 '18 at 04:42

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>

score 1 · Answer 2 · answered Jul 16 '18 at 04:40

1

Add this css code in your css file:

nav.navbar .navbar-toggler {
    line-height: 10px;
    padding: 0;
}

answered Jul 16 '18 at 04:40

Delowar Hosain

2,214
4
18
35

You are right, the `line-height` was an issue, however it comes with a `.btn` class, so the accepted answer is a better approach. Thanks for your input anyway, here's an upvote :) – Jul 16 '18 at 04:46

score 0 · Answer 3 · edited Jul 16 '18 at 12:37

0

Add this css in your css file.

.navbar .navbar-toggler {
    padding: .5rem .75rem;
}

edited Jul 16 '18 at 12:37

jrenk

1,387
3
24
46

answered Jul 16 '18 at 04:33

HTML CSS Hupp Technologies

335
1
6

`padding` itself was not enough, but thanks for your input, here's the upvote :) – Jul 16 '18 at 04:45

score 0 · Answer 4 · answered Jul 16 '18 at 05:34

0

you can also use transform:translateY to align

.navbar .navbar-toggler {
   transform: translateY(-17%);
 }

answered Jul 16 '18 at 05:34

anud33p

198
4
15

Bootstrap navbar hamburger icon does not align vertically

4 Answers4