how do i get glyphicon in the center of the bootstrap navbar? - html

Question

i am trying to get the glyphicon-log-in in the center of the bootstrap navbar and not even getting into the navbar mean it is showing above the navbar, when debugging.
<a class="navbar-brand pull-left" href="/"><img src="images/logo.png" alt="Elunika"></a>
<span class="glyphicon glyphicon-log-in" id="logIcon"></span>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active">
HOME
</li>
<li>
ABOUT
</li>
<li class="dropdown">
WHO, HOW & WHAT?
<ul class="dropdown-menu">
<li>
WHO WE ARE?
</li>
<li>
WHAT IS IT?
</li>
<li>
HOW IT WORKS?
</li>
</ul>
</li>
<li>
CONTACT US
</li>
</ul>
</div>
and css for logIcon is as follows
#logIcon{
position: absolute;
margin-left:auto;
margin-right:auto;
}
thank you for any help in advance

Answer 1

From your linked bootsnipp, you only have to replace the word "brand" with your glyphicon span.
<div class="navbar-brand navbar-brand-centered"><span class="glyphicon glyphicon-log-in" id="logIcon"></span></div>
Here's the code in a working fiddle: http://www.bootply.com/EmzUMHPXqd

Answer 2

http://www.bootply.com/eHiWDODA83
You could create a new class for the icon like this..
.navbar-center
{
position: absolute;
width: 100%;
top: 0;
text-align: center;
margin-left: auto;
margin-right: auto;
}
And then use markup like this..
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-center navbar-text" href="#"><span class="glyphicon glyphicon-log-in" id="logIcon"></span></a>
<div class="navbar-collapse collapse">
<a class="navbar-brand" href="/"><img src="images/logo.png" alt="Elunika"></a>
<ul class="nav navbar-nav navbar-right">
<li class="active">
HOME
</li>
<li>
ABOUT
</li>
<li class="dropdown">
WHO, HOW & WHAT?
<ul class="dropdown-menu">
<li>
WHO WE ARE?
</li>
<li>
WHAT IS IT?
</li>
<li>
HOW IT WORKS?
</li>
</ul>
</li>
<li>
CONTACT US
</li>
</ul>
</div>
</nav>
http://www.bootply.com/eHiWDODA83