How Do I Get Glyphicon In The Center Of The Bootstrap Navbar?

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.

Solution 1:

From your linked bootsnipp, you only have to replace the word "brand" with your glyphicon span.

<divclass="navbar-brand navbar-brand-centered"><spanclass="glyphicon glyphicon-log-in"id="logIcon"></span></div>

Here's the code in a working fiddle: http://www.bootply.com/EmzUMHPXqd

Solution 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">
  <divclass="navbar-header"><buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target=".navbar-collapse"><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button></div><aclass="navbar-center navbar-text"href="#"><spanclass="glyphicon glyphicon-log-in"id="logIcon"></span></a><divclass="navbar-collapse collapse"><aclass="navbar-brand"href="/"><imgsrc="images/logo.png"alt="Elunika"></a><ulclass="nav navbar-nav navbar-right"><liclass="active"><ahref="#">HOME</a></li><li><ahref="#">ABOUT</a></li><liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown"> WHO, HOW &amp; WHAT? </a><ulclass="dropdown-menu"><li><ahref="#">WHO WE ARE?</a></li><li><ahref="#">WHAT IS IT?</a></li><li><ahref="#">HOW IT WORKS?</a></li></ul></li><li><ahref="#">CONTACT US</a></li></ul></div></nav>

http://www.bootply.com/eHiWDODA83

Share