Centering text Vertically against icon inside Bootstrap's hamburger button

Question

I'm trying to customize Bootstrap's hamburger button when the screen is resized to a narrow width.

Codepen: http://codepen.io/Chiz/pen/epWLjY

Website: http://oneniceday.com/SR-1/SR-3.html (resize browser width to 768px or below)

Screenshot:

I want the "Menu" text to be centered vertically in the container, but it doesn't work for some reason regardless of what vertically-centering techniques I use. Currently, the text is aligned to the bottom of the button container.

Here's the code:

 $(document).ready(function() { $('.tab-menu li').each(function() { var ord = $(this).index() + 1; var width = $(this).width(); $(this).click(function() { var width = $(this).width(); var nextWidth = 0; $(this).prevAll().each(function() { nextWidth += $(this).width(); }); var widthtes = nextWidth; iterateLi(ord, widthtes, width); if ($(this).hasClass('active')) { //do nothing } else { //remove all active classes $(this).closest('ul').find('li').removeClass('active'); //add active class to selected li $(this).addClass('active'); } }); }); }); // Calculating position $('.tab-menu li:first-child').append('<span class="indicator"></span>'); $("head").append('<style class="tabs"></style>'); function iterateLi(ord, widthtes, width) { $('head style.tabs').append("li:first-child .indicator { -webkit-transform: translate3d(" + widthtes + "px,0,0); transform: translate3d(" + widthtes + "px,0,0); width: " + width + "px}"); } /* fix for the indicator tab which is 1px short */ var nNum = $(".navbar ul li .indicator").height(); nNum += 14; $(".navbar ul li .indicator").height(nNum); $("button.navbar-toggle").width("100px").height("45px"); 

 .navbar { background-color: rgba(230, 230, 230, 1.00); } .navbar-default .navbar-nav > li.active a, .navbar-default .navbar-nav > .active, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:link, .navbar-default .navbar-nav > .active > a:visited, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background-color: transparent; color: white; } .navbar ul { list-style: none; display: inline-block; padding: 0; background-color: rgba(230, 230, 230, 1.00); } .navbar ul li { display: inline-block; float: left; position: relative; margin-right: 0; width: 150px; text-align: center; } .navbar ul li a { position: relative; display: block; color: #fff; opacity: 1; z-index: 10; } .navbar ul li a:hover, .navbar ul li a:focus { text-decoration: none; color: #fff; opacity: 1; } .navbar ul li.active a, .navbar ul li.active a:hover, .navbar ul li.active:focus { opacity: 1; color: #222; } .navbar ul li .indicator { position: absolute; bottom: 0px; left: 0; width: 100%; height: 100%; /* consider using SASS to add 1px here */ background-color: rgba(132, 132, 132, 1.00); border-top-left-radius: 8px; border-top-right-radius: 8px; content: ''; -webkit-transition: -webkit-transform 100s; transition: transform 350ms; } .navbar-toggle { border: 1px solid black !important; padding: 0 5px; position: relative; margin: 4px; /* CENTER THE "MENU" text in the hamburger menu button */ height: 45px !important; line-height: 45px !important; } .bgtest { display: inline-block; width: 45px; height: 45px; background-color: red; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <nav class="navbar navbar-default navbar-fixed-bottom"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">MySiteLogo</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="bgtest"></span> Menu </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-right tab-menu"> <li class="active"><a href="#" data-toggle="tab">Me</a> </li> <li><a href="#" data-toggle="tab">Web</a> </li> <li><a href="#" data-toggle="tab">Print</a> </li> <li><a href="#" data-toggle="tab">Art / 3D</a> </li> </ul> </div> </div> </nav> 

Answer 1

Pen and FullscreenPen

Just wrap your text with one more span and add float:right or pull-right class to it as below:

Markup

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="bgtest"></span>
    <span class="pull-right">Menu</span> <!--Wrap it like this-->
</button>

Answer 2

添加这个类pull-left这个类bgtest

Answer 3

try using this <span style="height: 45px;vertical-align: top;display: inline-block;">Menu</span>

for your menu. use the css on that certain with of browser