How do I center the hamburger menu icon in bootstrap?

Question

I'm using Bootstrap 3.6 with Drupal 7. I have a hamburger menu for the navbar for mobile, but because I have a lot of users who don't understand the hamburger menu icon, I have added a text label, "Menu."

The problem is that the word "menu" and the hamburger icon appear on a different line, and since the word is longer, the spacing is off. So, I want to center the position of the hamburger icon.

Here is the code from my Drupal template.

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <span class="sr-only"><?php print t('Toggle navigation'); ?></span>
  <div class="text-center">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="navbar-txt"><?php print t('Menu'); ?></span>
  </div>
</button>

Unfortunately, text-center seems to be insufficient to center the hamburger icon. I'm not really familiar with the way Bootstrap makes the icon (through span tags), so if there is some trick to centering them please let me know.

aw030 aw030 · Accepted Answer · 2016-04-15T11:27:05

You are able to center the 3 lines (spans) in the button with:

.navbar-inverse .navbar-toggle .icon-bar {
  margin-left: auto;
  margin-right: auto;
}

How do I center the hamburger menu icon in bootstrap?

1 Answers