Bootstrap navbar-toggle hamburger icon with label

Question

I am using Bootstrap 3. I am using the standard navbar-toggle class with 3 span elements with class icon-bar to toggle the menu for small screens, as is shown here: https://www.w3schools.com/Bootstrap/bootstrap_navbar.asp (section: "Collapsing the Navbar")

I would like to add a label next to the icon bars so that if there is a notification in the collapsed menus, I can also show it on the hamburger icon.

However, any time I change the "hamburger" icon (the icon-bar spans), padding is added to the bottom and it makes the button take up more height, thus making the navbar take up more height... This is bad, I would like to not change the height of the Navbar.

Things I have tried: I can wrap the icon-bars in a span and make it inline-block, but this also adds padding. Even placing just simple text in the navbar-collapse button adds bottom padding to the button and the navbar.

Any suggestions how I can add a label to this button, without affecting the height of my navbar?

Answer 1

Can't you just set padding: 0 on the nav icon and label, or give it a fixed height?

Answer 2

The trick was setting line-height of the parent element to 0. When an element is changed from inline to block or inline-block, line-height is added to it. This is explained here: Why does inline-block cause this div to have height?

So, setting the line-height of the button element to 0 solved my issue:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#something" style="line-height: 0px;">
   <span style="display: inline-block;">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
  </span>
  <!-- Any other code (eg: label) that you want inline -->
</button>